Tooltips merge

components/Collab.js

@@ -11,8 +11,8 @@ import Dante, {darkTheme, defaultTheme, defaultPlugins} from '../packages/dante3
 import jsonContent from "../packages/dante3/src/data/content";
 //import {Readme as demo} from '../data/poc'
 
-import {version} from '../packages/dante3/package.json'
-
+import pkg from '../packages/dante3/package.json'
+const {version} from pkg
 
 export default function Index({ }) {
   const [theme, setTheme] = useState(defaultTheme)

packages/dante2/docs/tooltips.mdx

@@ -213,3 +213,21 @@ The default options for dante tooltip are:
   widgets={[CustomWidgetconfig()]}
 />
 ```
+
+## Add a popper to the button
+
+```js live=true
+<Dante
+  content={null}
+  tooltips={[
+    DanteInlineTooltipConfig({
+      fixed: true,
+    }),
+  ]}
+  widgets={[CustomWidgetconfig({ popper: { name: "Left", placement: "left" }}), 
+            CustomWidgetconfig({ popper: { name: "Top", placement: "top" }}),
+            CustomWidgetconfig({ popper: { name: "Bottom (default)", placement: "bottom" }}),
+            CustomWidgetconfig({ popper: { name: "Right", placement: "right" }}),
+            CustomWidgetconfig({ popper: { name: "Offset", placement: "bottom", offset: [8, 15] }})]}
+/>
+```

packages/dante2/package.json

@@ -48,6 +48,7 @@
     "react-colorful": "^5.1.2",
     "react-dev-utils": "^11.0.4",
     "react-popper": "^1.0.0",
+    "react-popper-tooltip": "^4.4.2",
     "react-select": "^2.0.0",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-multi-input": "^1.3.1"

packages/dante2/src/editor/components/popovers/addButton.js

@@ -8,6 +8,8 @@ import {
 } from "../../model/index.js";
 
 import { getVisibleSelectionRect } from "draft-js";
+import { usePopperTooltip } from "react-popper-tooltip";
+import 'react-popper-tooltip/dist/styles.css';
 
 import {
   getSelectionRect,
@@ -343,27 +345,49 @@ export default class DanteInlineTooltip extends React.Component {
   }
 }
 
-class InlineTooltipItem extends React.Component {
-  clickHandler = (e) => {
+function InlineTooltipItem ({ item: { type, popper, icon } , clickHandler, title }) {
+  const onClick = (e) => {
     e.preventDefault();
-    return this.props.clickHandler(e, this.props.item.type);
+    return clickHandler(e, type);
   };
 
-  render() {
-    return (
+  const popperPlacement = popper && popper.placement ? popper.placement : "bottom"
+  const popperOffset = popper && popper.offset ? popper.offset : [0, 7]
+
+  const {
+    getArrowProps,
+    getTooltipProps,
+    setTooltipRef,
+    setTriggerRef,
+    visible,
+  } = usePopperTooltip({ placement: popperPlacement, offset: popperOffset });
+
+  return (
+    <div className="button-container">
       <button
+        ref={setTriggerRef}
         type="button"
         className="inlineTooltip-button scale"
-        title={this.props.title}
-        data-cy={`inline-tooltip-button-${this.props.item.type}`}
-        onMouseDown={this.clickHandler}
+        title={title}
+        data-cy={`inline-tooltip-button-${type}`}
+        onMouseDown={onClick}
         onClick={(e) => e.preventDefault()}
         style={{ fontSize: "21px" }}
       >
-        {<span className={"tooltip-icon"}>{this.props.item.icon()}</span>}
+        {<span className={"tooltip-icon"}>{icon()}</span>}
       </button>
-    );
-  }
+      {(popper && visible) && (
+        <div
+          ref={setTooltipRef}
+          {...getTooltipProps({ className: 'tooltip-container', style: { fontSize: "12px", borderRadius: "5px" } })}
+        >
+          <div {...getArrowProps({ className: 'tooltip-arrow' })} />
+          {popper && popper.name}
+        </div>
+      )}
+    </div>
+  );
+
 }
 
 export const DanteInlineTooltipConfig = (options = {}) => {

packages/dante2/src/editor/styled/base.js

@@ -623,6 +623,10 @@ export const InlinetooltipWrapper = styled.div`
   }
 
   // BUTTON
+  .button-container {
+    display: inline-block;
+  }
+
   .inlineTooltip-button {
 
     // BASE

pages/dante1/posts/[slug].js

@@ -9,8 +9,8 @@ import path from 'path'
 import Layout from '../../../components/Layout'
 //import Live from '../components/Live'
 import Sidebar from '../../../components/Sidebar'
-import {version} from '../../../packages/dante3/package.json'
-
+import pkg from '../../../packages/dante3/package.json'
+const {version} = pkg
 
 // POSTS_PATH is useful when you want to get the path to a specific file
 const POSTS_PATH = path.join(process.cwd(), 'packages/dante1-legacy/docs')

pages/dante2.js

@@ -10,8 +10,9 @@ import {Component, useEffect, useState} from 'react'
 //import {Readme as demo} from '../data/poc'
 import {Readme as jsonContent} from '../data/poc'
 
-import {version, name} from '../packages/dante2/package.json'
+import pkg from '../packages/dante2/package.json'
 
+const {version, name} = pkg
 
 export default function Index({ }) {
   const [theme, setTheme] = useState(defaultTheme)

pages/dante2/posts/[slug].js

@@ -11,8 +11,8 @@ import Layout from "../../../components/Layout";
 import Live from "../../../components/Live";
 import { postFilePaths, POSTS_PATH } from "../../../utils/mdxUtils";
 import Sidebar from "../../../components/Sidebar";
-import { version } from "Dante2/package";
-
+import pkg from "Dante2/package";
+const { version } = pkg
 //import Dante2 from 'Dante2'
 const components = {
   a: CustomLink,

pages/index.js

@@ -10,7 +10,8 @@ import Dante, {
 
 import { contentDemo as htmlContent } from "../packages/dante3/src/data/content";
 
-import { version, name } from "../packages/dante3/package.json";
+import pkg from "../packages/dante3/package.json";
+const { version, name } = pkg
 
 export default function Index({}) {
   const [theme, setTheme] = useState(defaultTheme);

pages/posts/[slug].js

@@ -14,8 +14,8 @@ import {
   POSTS_PATH2 as POSTS_PATH,
 } from "../../utils/mdxUtils";
 import Sidebar from "../../components/Sidebar";
-import { version } from "../../packages/dante3/package.json";
-
+import pkg from "../../packages/dante3/package.json";
+const {version} = pkg
 //import Dante2 from 'Dante2'
 const components = {
   a: CustomLink,