@plasmicpkgs/tiptap 0.0.1

package/skinny/registerTiptap-fd9bf882.cjs.js

@@ -0,0 +1,391 @@
+'use strict';
+
+var Document = require('@tiptap/extension-document');
+var Paragraph = require('@tiptap/extension-paragraph');
+var Text = require('@tiptap/extension-text');
+var react = require('@tiptap/react');
+var antd = require('antd');
+var React = require('react');
+var registerComponent = require('@plasmicapp/host/registerComponent');
+require('@plasmicapp/host/registerGlobalContext');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Document__default = /*#__PURE__*/_interopDefault(Document);
+var Paragraph__default = /*#__PURE__*/_interopDefault(Paragraph);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var registerComponent__default = /*#__PURE__*/_interopDefault(registerComponent);
+
+const RESET_TIMEOUT_MS = 500;
+const allExtensions = [
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "code",
+  "link",
+  "mention"
+];
+const TiptapContext = React__default.default.createContext(void 0);
+const useTiptapContext = () => {
+  const context = React__default.default.useContext(TiptapContext);
+  if (!context) {
+    throw new Error(
+      "useTiptapContext must be used within a TiptapContextProvider"
+    );
+  }
+  return context;
+};
+const TiptapContextProvider = ({ children }) => {
+  const [bold, setBold] = React.useState(void 0);
+  const [code, setCode] = React.useState(void 0);
+  const [italic, setItalic] = React.useState(
+    void 0
+  );
+  const [link, setLink] = React.useState(void 0);
+  const [mention, setMention] = React.useState(
+    void 0
+  );
+  const [strike, setStrike] = React.useState(
+    void 0
+  );
+  const [underline, setUnderline] = React.useState(void 0);
+  return /* @__PURE__ */ React__default.default.createElement(
+    TiptapContext.Provider,
+    {
+      value: {
+        bold,
+        setBold,
+        code,
+        setCode,
+        italic,
+        setItalic,
+        link,
+        setLink,
+        mention,
+        /**
+         * In situations where I want to remove an extension and add it again with new options (e.g. within a useEffect - see registerMention)
+         * the options are not updated.
+         * So after removing the extension, I want to wait a few seconds before I add it again,
+         * so the Tiptap editor acknowledges the removal before it adds the extension back with new updated options.
+         * @param mentionOptions
+         * @returns
+         */
+        setMention: (mentionOptions) => {
+          if (!mentionOptions) {
+            setMention(mentionOptions);
+            return;
+          }
+          setTimeout(() => {
+            setMention(mentionOptions);
+          }, RESET_TIMEOUT_MS);
+        },
+        strike,
+        setStrike,
+        underline,
+        setUnderline
+      }
+    },
+    children
+  );
+};
+
+function useIsClient() {
+  const [loaded, setLoaded] = React__default.default.useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setLoaded(true);
+  });
+  return loaded;
+}
+const isBrowser = typeof window !== "undefined";
+const useIsomorphicLayoutEffect = isBrowser ? React__default.default.useLayoutEffect : React__default.default.useEffect;
+
+function registerComponentHelper(loader, component, meta) {
+  if (loader) {
+    loader.registerComponent(component, meta);
+  } else {
+    registerComponent__default.default(component, meta);
+  }
+}
+function traverseReactEltTree(children, callback) {
+  const rec = (elts) => {
+    (Array.isArray(elts) ? elts : [elts]).forEach((elt) => {
+      var _a;
+      if (elt) {
+        callback(elt);
+        if (elt.children) {
+          rec(elt.children);
+        }
+        if (((_a = elt.props) == null ? void 0 : _a.children) && elt.props.children !== elt.children) {
+          rec(elt.props.children);
+        }
+      }
+    });
+  };
+  rec(children);
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const TIPTAP_COMPONENT_NAME = "hostless-tiptap";
+function Tiptap(props) {
+  const isClient = useIsClient();
+  const [active, setActive] = React.useState(false);
+  const [refreshKey, setRefreshKey] = React.useState(0);
+  const activeRef = React.useRef();
+  activeRef.current = active;
+  const {
+    extensions,
+    contentHtml,
+    defaultContentHtml,
+    className,
+    onChange,
+    toolbar
+  } = props;
+  const tiptapContext = __objRest(useTiptapContext(), []);
+  const usedExtensions = allExtensions.reduce(
+    (acc, ext) => {
+      if (tiptapContext[ext] !== void 0) {
+        acc[ext] = tiptapContext[ext];
+      }
+      return acc;
+    },
+    {}
+  );
+  const extensionsProp = [
+    Document__default.default,
+    Paragraph__default.default,
+    Text__default.default,
+    ...Object.values(usedExtensions)
+  ];
+  React.useEffect(() => {
+    if (activeRef.current)
+      return;
+    setRefreshKey(Math.random() * 1e6);
+  }, [contentHtml]);
+  if (!isClient) {
+    return null;
+  }
+  const css = `
+    .tiptap {
+      padding: 0;
+      outline: none;
+    }
+  `;
+  const toolbarProp = toolbar ? /* @__PURE__ */ React__default.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, toolbar) : null;
+  return /* @__PURE__ */ React__default.default.createElement("div", { className, style: { position: "relative" } }, /* @__PURE__ */ React__default.default.createElement(
+    react.EditorProvider,
+    {
+      key: `${extensionsProp.length}${refreshKey}`,
+      extensions: extensionsProp,
+      content: contentHtml || defaultContentHtml,
+      onCreate: ({ editor }) => {
+        onChange(editor.getJSON());
+      },
+      onUpdate: ({ editor }) => {
+        onChange(editor.getJSON());
+      },
+      onFocus: () => setActive(true),
+      onBlur: () => setActive(false),
+      slotBefore: toolbarProp,
+      children: void 0,
+      editorProps: {
+        attributes: {
+          className
+        }
+      }
+    }
+  ), extensions, /* @__PURE__ */ React__default.default.createElement("style", { dangerouslySetInnerHTML: { __html: css } }));
+}
+function TiptapWrapper(props) {
+  return /* @__PURE__ */ React__default.default.createElement(TiptapContextProvider, null, /* @__PURE__ */ React__default.default.createElement(Tiptap, __spreadValues({}, props)));
+}
+function AddExtension({
+  studioOps,
+  componentProps
+}) {
+  const usedExtensions = React.useMemo(() => {
+    const list = [];
+    traverseReactEltTree(componentProps == null ? void 0 : componentProps.extensions, (elt) => {
+      var _a, _b, _c;
+      const ext = (_c = (_b = (_a = elt == null ? void 0 : elt.type) == null ? void 0 : _a.displayName) == null ? void 0 : _b.toLowerCase) == null ? void 0 : _c.call(_b);
+      if (ext) {
+        list.push(ext);
+      }
+    });
+    return list;
+  }, [componentProps == null ? void 0 : componentProps.extensions]);
+  const usedExtensionTools = React.useMemo(() => {
+    const list = [];
+    traverseReactEltTree(componentProps == null ? void 0 : componentProps.toolbar, (elt) => {
+      var _a, _b, _c;
+      const ext = (_c = (_b = (_a = elt == null ? void 0 : elt.type) == null ? void 0 : _a.displayName) == null ? void 0 : _b.toLowerCase) == null ? void 0 : _c.call(_b);
+      if (ext && ext.includes("toolbar")) {
+        list.push(ext.replace("toolbar", ""));
+      }
+    });
+    return list;
+  }, [componentProps == null ? void 0 : componentProps.toolbar]);
+  const handleChange = (extName, add) => {
+    if (add) {
+      studioOps.appendToSlot(
+        {
+          type: "component",
+          name: `${TIPTAP_COMPONENT_NAME}-extension-${extName}`,
+          props: {}
+        },
+        "extensions"
+      );
+      studioOps.appendToSlot(
+        {
+          type: "component",
+          name: `${TIPTAP_COMPONENT_NAME}-toolbar-${extName}`,
+          props: {}
+        },
+        "toolbar"
+      );
+    } else {
+      const extIndices = usedExtensions.flatMap(
+        (ext, i) => ext === extName ? i : []
+      );
+      extIndices.reverse().forEach(
+        (i) => i !== -1 && studioOps.removeFromSlotAt(i, "extensions")
+      );
+      const toolIndices = usedExtensionTools.flatMap(
+        (ext, i) => ext === extName ? i : []
+      );
+      toolIndices.reverse().forEach((i) => i !== -1 && studioOps.removeFromSlotAt(i, "toolbar"));
+    }
+  };
+  return /* @__PURE__ */ React__default.default.createElement(
+    "div",
+    {
+      style: {
+        marginBottom: 10,
+        paddingBottom: 10,
+        borderBottom: "1px dashed #ccc"
+      }
+    },
+    /* @__PURE__ */ React__default.default.createElement("p", null, "You can add capabilities to Tiptap Rich Text Editor using the tools below."),
+    /* @__PURE__ */ React__default.default.createElement("p", null, `To further customize the extensions, find them under the Editor's "extensions" and "toolbar" slots`),
+    allExtensions.map((ext) => /* @__PURE__ */ React__default.default.createElement(
+      "label",
+      {
+        "data-test-id": `custom-action-${ext}`,
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          marginBottom: 5,
+          color: "#1b1b18"
+        }
+      },
+      /* @__PURE__ */ React__default.default.createElement("span", null, ext),
+      /* @__PURE__ */ React__default.default.createElement(
+        antd.Switch,
+        {
+          size: "small",
+          checked: usedExtensions.includes(ext) || usedExtensionTools.includes(ext),
+          onChange: (checked) => handleChange(ext, checked)
+        }
+      )
+    ))
+  );
+}
+function registerTiptap(loader) {
+  registerComponentHelper(loader, TiptapWrapper, {
+    name: TIPTAP_COMPONENT_NAME,
+    displayName: "Tiptap Rich Text Editor",
+    defaultStyles: {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "rgb(204,204,204)",
+      borderRadius: "4px",
+      padding: "10px",
+      width: "300px"
+    },
+    actions: [
+      {
+        type: "custom-action",
+        control: AddExtension
+      }
+    ],
+    props: {
+      contentHtml: {
+        type: "string",
+        displayName: "HTML Content",
+        editOnly: true,
+        uncontrolledProp: "defaultContentHtml",
+        description: "Contents of the editor"
+      },
+      contentJson: {
+        type: "object",
+        displayName: "JSON Content",
+        hidden: () => true
+      },
+      extensions: {
+        type: "slot",
+        hidePlaceholder: true,
+        allowedComponents: allExtensions.map(
+          (ext) => `${TIPTAP_COMPONENT_NAME}-extension-${ext}`
+        )
+      },
+      toolbar: {
+        type: "slot",
+        hidePlaceholder: true,
+        allowedComponents: allExtensions.map(
+          (ext) => `${TIPTAP_COMPONENT_NAME}-toolbar-${ext}`
+        )
+      },
+      onChange: {
+        type: "eventHandler",
+        argTypes: [{ name: "content", type: "object" }]
+      }
+    },
+    states: {
+      content: {
+        type: "writable",
+        variableType: "object",
+        valueProp: "contentJson",
+        onChangeProp: "onChange"
+      }
+    },
+    importName: "TiptapWrapper",
+    importPath: "@plasmicpkgs/tiptap/skinny/registerTiptap"
+  });
+}
+
+exports.AddExtension = AddExtension;
+exports.TIPTAP_COMPONENT_NAME = TIPTAP_COMPONENT_NAME;
+exports.Tiptap = Tiptap;
+exports.TiptapWrapper = TiptapWrapper;
+exports.registerComponentHelper = registerComponentHelper;
+exports.registerTiptap = registerTiptap;
+exports.useTiptapContext = useTiptapContext;
+//# sourceMappingURL=registerTiptap-fd9bf882.cjs.js.map

package/skinny/registerTiptap-fd9bf882.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerTiptap-fd9bf882.cjs.js","sources":["../src/contexts.tsx","../src/useIsClient.ts","../src/utils.ts","../src/registerTiptap.tsx"],"sourcesContent":["import { Mark, Node } from \"@tiptap/core\";\nimport type { BoldOptions } from \"@tiptap/extension-bold\";\nimport type { CodeOptions } from \"@tiptap/extension-code\";\nimport type { ItalicOptions } from \"@tiptap/extension-italic\";\nimport type { LinkOptions } from \"@tiptap/extension-link\";\nimport type { MentionOptions } from \"@tiptap/extension-mention\";\nimport type { StrikeOptions } from \"@tiptap/extension-strike\";\nimport type { UnderlineOptions } from \"@tiptap/extension-underline\";\nimport React, { useState } from \"react\";\n\nexport const RESET_TIMEOUT_MS = 500;\nexport interface TiptapContextProps {\n  bold?: Mark<BoldOptions>;\n  setBold: (boldOptions?: Mark<BoldOptions>) => void;\n  code?: Mark<CodeOptions>;\n  setCode: (codeOptions?: Mark<CodeOptions>) => void;\n  italic?: Mark<ItalicOptions>;\n  setItalic: (italicOptions?: Mark<ItalicOptions>) => void;\n  link?: Mark<LinkOptions>;\n  setLink: (linkOptions?: Mark<LinkOptions>) => void;\n  mention?: Node<MentionOptions>;\n  setMention: (mentionOptions?: Node<MentionOptions>) => void;\n  strike?: Mark<StrikeOptions>;\n  setStrike: (strikeOptions?: Mark<StrikeOptions>) => void;\n  underline?: Mark<UnderlineOptions>;\n  setUnderline: (underlineOptions?: Mark<UnderlineOptions>) => void;\n}\n\nexport const allExtensions: Extract<keyof TiptapContextProps, string>[] = [\n  \"bold\",\n  \"italic\",\n  \"underline\",\n  \"strike\",\n  \"code\",\n  \"link\",\n  \"mention\",\n];\n\nexport const TiptapContext = React.createContext<\n  TiptapContextProps | undefined\n>(undefined);\n\nexport const useTiptapContext = () => {\n  const context = React.useContext(TiptapContext);\n  if (!context) {\n    throw new Error(\n      \"useTiptapContext must be used within a TiptapContextProvider\"\n    );\n  }\n  return context;\n};\n\nexport const TiptapContextProvider = ({ children }: any) => {\n  const [bold, setBold] = useState<Mark<BoldOptions> | undefined>(undefined);\n  const [code, setCode] = useState<Mark<CodeOptions> | undefined>(undefined);\n  const [italic, setItalic] = useState<Mark<ItalicOptions> | undefined>(\n    undefined\n  );\n  const [link, setLink] = useState<Mark<LinkOptions> | undefined>(undefined);\n  const [mention, setMention] = useState<Node<MentionOptions> | undefined>(\n    undefined\n  );\n  const [strike, setStrike] = useState<Mark<StrikeOptions> | undefined>(\n    undefined\n  );\n  const [underline, setUnderline] = useState<\n    Mark<UnderlineOptions> | undefined\n  >(undefined);\n\n  return (\n    <TiptapContext.Provider\n      value={{\n        bold,\n        setBold,\n        code,\n        setCode,\n        italic,\n        setItalic,\n        link,\n        setLink,\n        mention,\n        /**\n         * In situations where I want to remove an extension and add it again with new options (e.g. within a useEffect - see registerMention)\n         * the options are not updated.\n         * So after removing the extension, I want to wait a few seconds before I add it again,\n         * so the Tiptap editor acknowledges the removal before it adds the extension back with new updated options.\n         * @param mentionOptions\n         * @returns\n         */\n        setMention: (mentionOptions?: Node<MentionOptions>) => {\n          if (!mentionOptions) {\n            setMention(mentionOptions);\n            return;\n          }\n          setTimeout(() => {\n            setMention(mentionOptions);\n          }, RESET_TIMEOUT_MS);\n        },\n        strike,\n        setStrike,\n        underline,\n        setUnderline,\n      }}\n    >\n      {children}\n    </TiptapContext.Provider>\n  );\n};\n","import React from \"react\";\n\nexport function useIsClient() {\n  const [loaded, setLoaded] = React.useState(false);\n  useIsomorphicLayoutEffect(() => {\n    setLoaded(true);\n  });\n  return loaded;\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nconst isBrowser = typeof window !== \"undefined\";\nexport const useIsomorphicLayoutEffect = isBrowser\n  ? React.useLayoutEffect\n  : React.useEffect;\n","import {\n  ComponentMeta,\n  default as registerComponent,\n} from \"@plasmicapp/host/registerComponent\";\nimport {\n  default as registerGlobalContext,\n  GlobalContextMeta,\n} from \"@plasmicapp/host/registerGlobalContext\";\nimport { default as registerToken } from \"@plasmicapp/host/registerToken\";\nimport React from \"react\";\n\nexport type Registerable = {\n  registerComponent: typeof registerComponent;\n  registerGlobalContext: typeof registerGlobalContext;\n  registerToken: typeof registerToken;\n};\n\nexport function makeRegisterComponent<T extends React.ComponentType<any>>(\n  component: T,\n  meta: ComponentMeta<React.ComponentProps<T>>\n) {\n  return function (loader?: Registerable) {\n    registerComponentHelper(loader, component, meta);\n  };\n}\n\nexport function makeRegisterGlobalContext<T extends React.ComponentType<any>>(\n  component: T,\n  meta: GlobalContextMeta<React.ComponentProps<T>>\n) {\n  return function (loader?: Registerable) {\n    if (loader) {\n      loader.registerGlobalContext(component, meta);\n    } else {\n      registerGlobalContext(component, meta);\n    }\n  };\n}\n\nexport function registerComponentHelper<T extends React.ComponentType<any>>(\n  loader: Registerable | undefined,\n  component: T,\n  meta: ComponentMeta<React.ComponentProps<T>>\n) {\n  if (loader) {\n    loader.registerComponent(component, meta);\n  } else {\n    registerComponent(component, meta);\n  }\n}\n\ntype ReactElt = {\n  children: ReactElt | ReactElt[];\n  props: {\n    children: ReactElt | ReactElt[];\n    [prop: string]: any;\n  } | null;\n  type: React.ComponentType<any> | null;\n  key: string | null;\n} | null;\n\nexport function traverseReactEltTree(\n  children: React.ReactNode,\n  callback: (elt: ReactElt) => void\n) {\n  const rec = (elts: ReactElt | ReactElt[] | null) => {\n    (Array.isArray(elts) ? elts : [elts]).forEach((elt) => {\n      if (elt) {\n        callback(elt);\n        if (elt.children) {\n          rec(elt.children);\n        }\n        if (elt.props?.children && elt.props.children !== elt.children) {\n          rec(elt.props.children);\n        }\n      }\n    });\n  };\n  rec(children as any);\n}\n\nexport function asArray<T>(x: T[] | T | undefined | null) {\n  if (Array.isArray(x)) {\n    return x;\n  } else if (x == null) {\n    return [];\n  } else {\n    return [x];\n  }\n}\n","import { ActionProps } from \"@plasmicapp/host/registerComponent\";\nimport Document from \"@tiptap/extension-document\";\nimport Paragraph from \"@tiptap/extension-paragraph\";\nimport Text from \"@tiptap/extension-text\";\nimport type { Extensions, JSONContent } from \"@tiptap/react\";\nimport { EditorProvider } from \"@tiptap/react\";\nimport { Switch } from \"antd\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  allExtensions,\n  TiptapContextProvider,\n  useTiptapContext,\n} from \"./contexts\";\nimport { useIsClient } from \"./useIsClient\";\nimport {\n  Registerable,\n  registerComponentHelper,\n  traverseReactEltTree,\n} from \"./utils\";\n\nexport const TIPTAP_COMPONENT_NAME = \"hostless-tiptap\";\n\nexport type TiptapProps = {\n  contentHtml?: string;\n  defaultContentHtml?: string;\n  contentJson?: JSONContent;\n  extensions?: React.ReactElement;\n  toolbar?: React.ReactElement;\n  className: string;\n  onChange: (content: JSONContent) => void;\n};\n\nexport function Tiptap(props: TiptapProps) {\n  const isClient = useIsClient();\n  const [active, setActive] = useState<boolean>(false);\n  const [refreshKey, setRefreshKey] = useState(0);\n  const activeRef = useRef<boolean>();\n  activeRef.current = active;\n\n  const {\n    extensions,\n    contentHtml,\n    defaultContentHtml,\n    className,\n    onChange,\n    toolbar,\n  } = props;\n  const { ...tiptapContext } = useTiptapContext();\n  const usedExtensions: Record<string, any> = allExtensions.reduce(\n    (acc: any, ext) => {\n      if (tiptapContext[ext] !== undefined) {\n        acc[ext] = tiptapContext[ext];\n      }\n      return acc;\n    },\n    {}\n  );\n\n  const extensionsProp: Extensions = [\n    Document,\n    Paragraph,\n    Text,\n    ...Object.values(usedExtensions),\n  ];\n\n  // If you try to update the content via the content prop (as opposed to directly typing into the tiptap editor), the new content won't show. So we got to refresh the editor to make the default content appear.\n  useEffect(() => {\n    if (activeRef.current) return;\n    setRefreshKey(Math.random() * 1000000);\n  }, [contentHtml]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const css = `\n    .tiptap {\n      padding: 0;\n      outline: none;\n    }\n  `;\n\n  const toolbarProp = toolbar ? (\n    <div style={{ display: \"flex\", alignItems: \"center\" }}>{toolbar}</div>\n  ) : null;\n\n  return (\n    <div className={className} style={{ position: \"relative\" }}>\n      <EditorProvider\n        key={`${extensionsProp.length}${refreshKey}`}\n        // extensions={extensionsProp}\n        extensions={extensionsProp}\n        content={contentHtml || defaultContentHtml}\n        onCreate={({ editor }) => {\n          onChange(editor.getJSON());\n        }}\n        onUpdate={({ editor }) => {\n          onChange(editor.getJSON());\n        }}\n        onFocus={() => setActive(true)}\n        onBlur={() => setActive(false)}\n        slotBefore={toolbarProp}\n        // slotAfter={<MyEditorFooter />}\n\n        // TODO: HIDE children prop\n        children={undefined}\n        editorProps={{\n          attributes: {\n            className,\n          },\n        }}\n      />\n      {extensions}\n      <style dangerouslySetInnerHTML={{ __html: css }} />\n    </div>\n  );\n}\n\nexport function TiptapWrapper(props: TiptapProps) {\n  return (\n    <TiptapContextProvider>\n      <Tiptap {...props} />\n    </TiptapContextProvider>\n  );\n}\n\nexport function AddExtension({\n  studioOps,\n  componentProps,\n}: ActionProps<TiptapProps>) {\n  const usedExtensions: string[] = useMemo(() => {\n    const list: string[] = [];\n    traverseReactEltTree(componentProps?.extensions, (elt) => {\n      const ext = elt?.type?.displayName?.toLowerCase?.();\n      if (ext) {\n        list.push(ext);\n      }\n    });\n    return list;\n  }, [componentProps?.extensions]);\n\n  const usedExtensionTools: string[] = useMemo(() => {\n    const list: string[] = [];\n    traverseReactEltTree(componentProps?.toolbar, (elt) => {\n      const ext = elt?.type?.displayName?.toLowerCase?.();\n      if (ext && ext.includes(\"toolbar\")) {\n        list.push(ext.replace(\"toolbar\", \"\"));\n      }\n    });\n    return list;\n  }, [componentProps?.toolbar]);\n\n  const handleChange = (extName: string, add: boolean) => {\n    if (add) {\n      studioOps.appendToSlot(\n        {\n          type: \"component\",\n          name: `${TIPTAP_COMPONENT_NAME}-extension-${extName}`,\n          props: {},\n        },\n        \"extensions\"\n      );\n      studioOps.appendToSlot(\n        {\n          type: \"component\",\n          name: `${TIPTAP_COMPONENT_NAME}-toolbar-${extName}`,\n          props: {},\n        },\n        \"toolbar\"\n      );\n    } else {\n      const extIndices = usedExtensions.flatMap((ext, i) =>\n        ext === extName ? i : []\n      );\n      extIndices\n        .reverse()\n        .forEach(\n          (i) => i !== -1 && studioOps.removeFromSlotAt(i, \"extensions\")\n        );\n\n      const toolIndices = usedExtensionTools.flatMap((ext, i) =>\n        ext === extName ? i : []\n      );\n      toolIndices\n        .reverse()\n        .forEach((i) => i !== -1 && studioOps.removeFromSlotAt(i, \"toolbar\"));\n    }\n  };\n\n  return (\n    <div\n      style={{\n        marginBottom: 10,\n        paddingBottom: 10,\n        borderBottom: \"1px dashed #ccc\",\n      }}\n    >\n      <p>\n        You can add capabilities to Tiptap Rich Text Editor using the tools\n        below.\n      </p>\n      <p>\n        To further customize the extensions, find them under the Editor's\n        \"extensions\" and \"toolbar\" slots\n      </p>\n      {allExtensions.map((ext) => (\n        <label\n          data-test-id={`custom-action-${ext}`}\n          style={{\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            marginBottom: 5,\n            color: \"#1b1b18\",\n          }}\n        >\n          <span>{ext}</span>\n          <Switch\n            size=\"small\"\n            checked={\n              usedExtensions.includes(ext) || usedExtensionTools.includes(ext)\n            }\n            onChange={(checked) => handleChange(ext, checked)}\n          />\n        </label>\n      ))}\n    </div>\n  );\n}\n\nexport function registerTiptap(loader?: Registerable) {\n  registerComponentHelper(loader, TiptapWrapper, {\n    name: TIPTAP_COMPONENT_NAME,\n    displayName: \"Tiptap Rich Text Editor\",\n    defaultStyles: {\n      borderWidth: \"1px\",\n      borderStyle: \"solid\",\n      borderColor: \"rgb(204,204,204)\",\n      borderRadius: \"4px\",\n      padding: \"10px\",\n      width: \"300px\",\n    },\n    actions: [\n      {\n        type: \"custom-action\",\n        control: AddExtension,\n      },\n    ],\n    props: {\n      contentHtml: {\n        type: \"string\",\n        displayName: \"HTML Content\",\n        editOnly: true,\n        uncontrolledProp: \"defaultContentHtml\",\n        description: \"Contents of the editor\",\n      },\n      contentJson: {\n        type: \"object\",\n        displayName: \"JSON Content\",\n        hidden: () => true,\n      },\n      extensions: {\n        type: \"slot\",\n        hidePlaceholder: true,\n        allowedComponents: allExtensions.map(\n          (ext) => `${TIPTAP_COMPONENT_NAME}-extension-${ext}`\n        ),\n      },\n      toolbar: {\n        type: \"slot\",\n        hidePlaceholder: true,\n        allowedComponents: allExtensions.map(\n          (ext) => `${TIPTAP_COMPONENT_NAME}-toolbar-${ext}`\n        ),\n      },\n      onChange: {\n        type: \"eventHandler\",\n        argTypes: [{ name: \"content\", type: \"object\" }],\n      },\n    },\n    states: {\n      content: {\n        type: \"writable\",\n        variableType: \"object\",\n        valueProp: \"contentJson\",\n        onChangeProp: \"onChange\",\n      },\n    },\n    importName: \"TiptapWrapper\",\n    importPath: \"@plasmicpkgs/tiptap/skinny/registerTiptap\",\n  });\n}\n"],"names":["React","useState","registerComponent","useRef","Document","Paragraph","Text","useEffect","EditorProvider","useMemo","Switch"],"mappings":"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"}

package/skinny/registerTiptap.cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+require('@tiptap/extension-document');
+require('@tiptap/extension-paragraph');
+require('@tiptap/extension-text');
+require('@tiptap/react');
+require('antd');
+require('react');
+var registerTiptap = require('./registerTiptap-fd9bf882.cjs.js');
+require('@plasmicapp/host/registerComponent');
+require('@plasmicapp/host/registerGlobalContext');
+
+
+
+exports.AddExtension = registerTiptap.AddExtension;
+exports.TIPTAP_COMPONENT_NAME = registerTiptap.TIPTAP_COMPONENT_NAME;
+exports.Tiptap = registerTiptap.Tiptap;
+exports.TiptapWrapper = registerTiptap.TiptapWrapper;
+exports.registerTiptap = registerTiptap.registerTiptap;
+//# sourceMappingURL=registerTiptap.cjs.js.map

package/skinny/registerTiptap.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerTiptap.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/skinny/registerTiptap.d.ts

@@ -0,0 +1,18 @@
+import { ActionProps } from "@plasmicapp/host/registerComponent";
+import type { JSONContent } from "@tiptap/react";
+import React from "react";
+import { Registerable } from "./utils";
+export declare const TIPTAP_COMPONENT_NAME = "hostless-tiptap";
+export type TiptapProps = {
+    contentHtml?: string;
+    defaultContentHtml?: string;
+    contentJson?: JSONContent;
+    extensions?: React.ReactElement;
+    toolbar?: React.ReactElement;
+    className: string;
+    onChange: (content: JSONContent) => void;
+};
+export declare function Tiptap(props: TiptapProps): React.JSX.Element | null;
+export declare function TiptapWrapper(props: TiptapProps): React.JSX.Element;
+export declare function AddExtension({ studioOps, componentProps, }: ActionProps<TiptapProps>): React.JSX.Element;
+export declare function registerTiptap(loader?: Registerable): void;

package/skinny/registerTiptap.esm.js

@@ -0,0 +1,10 @@
+import '@tiptap/extension-document';
+import '@tiptap/extension-paragraph';
+import '@tiptap/extension-text';
+import '@tiptap/react';
+import 'antd';
+import 'react';
+export { A as AddExtension, T as TIPTAP_COMPONENT_NAME, a as Tiptap, b as TiptapWrapper, c as registerTiptap } from './registerTiptap-6a2d0bb4.esm.js';
+import '@plasmicapp/host/registerComponent';
+import '@plasmicapp/host/registerGlobalContext';
+//# sourceMappingURL=registerTiptap.esm.js.map

package/skinny/registerTiptap.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerTiptap.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/skinny/registerToolbarBold.cjs.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var react = require('@tiptap/react');
+var React = require('react');
+var registerTiptap = require('./registerTiptap-fd9bf882.cjs.js');
+require('@tiptap/extension-document');
+require('@tiptap/extension-paragraph');
+require('@tiptap/extension-text');
+require('antd');
+require('@plasmicapp/host/registerComponent');
+require('@plasmicapp/host/registerGlobalContext');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function ToolbarBold(props) {
+  const { editor } = react.useCurrentEditor();
+  const { bold } = registerTiptap.useTiptapContext();
+  const { className, children, toolbarBoldScopeClassName } = props;
+  if (!editor || !bold)
+    return null;
+  return /* @__PURE__ */ React__default.default.createElement(
+    "div",
+    {
+      "data-active": editor.isActive("bold") ? true : false,
+      className: `${className} ${toolbarBoldScopeClassName}`,
+      style: { cursor: "pointer" },
+      role: "button",
+      onClick: () => editor.chain().focus().toggleMark("bold").run()
+    },
+    children
+  );
+}
+ToolbarBold.displayName = "ToolbarBold";
+function registerToolbarBold(loader) {
+  registerTiptap.registerComponentHelper(loader, ToolbarBold, {
+    name: `${registerTiptap.TIPTAP_COMPONENT_NAME}-toolbar-bold`,
+    displayName: "Tiptap Bold Toolbar Option",
+    defaultStyles: {
+      width: "hug",
+      padding: "5px"
+    },
+    props: {
+      children: {
+        type: "slot",
+        hidePlaceholder: true,
+        defaultValue: [
+          {
+            type: "img",
+            src: "https://static1.plasmic.app/bold.svg"
+          }
+        ]
+      },
+      toolbarBoldScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "toolbarBold"
+      },
+      selectedClassName: {
+        type: "class",
+        displayName: "Tool Selected",
+        selectors: [
+          {
+            selector: ":toolbarBold[data-active=true]",
+            label: "Base"
+          }
+        ]
+      }
+    },
+    importName: "ToolbarBold",
+    importPath: "@plasmicpkgs/tiptap/skinny/registerToolbarBold",
+    parentComponentName: registerTiptap.TIPTAP_COMPONENT_NAME
+  });
+}
+
+exports.ToolbarBold = ToolbarBold;
+exports.registerToolbarBold = registerToolbarBold;
+//# sourceMappingURL=registerToolbarBold.cjs.js.map

package/skinny/registerToolbarBold.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerToolbarBold.cjs.js","sources":["../src/toolbar/registerToolbarBold.tsx"],"sourcesContent":["import { useCurrentEditor } from \"@tiptap/react\";\nimport React from \"react\";\nimport { useTiptapContext } from \"../contexts\";\nimport { TIPTAP_COMPONENT_NAME } from \"../registerTiptap\";\nimport { Registerable, registerComponentHelper } from \"../utils\";\n\nexport interface ToolbarBoldProps {\n  className: string;\n  children: React.ReactNode;\n  selectedClassName: string;\n  toolbarBoldScopeClassName: string;\n}\n\nexport function ToolbarBold(props: ToolbarBoldProps) {\n  const { editor } = useCurrentEditor();\n  const { bold } = useTiptapContext();\n\n  const { className, children, toolbarBoldScopeClassName } = props;\n\n  if (!editor || !bold) return null;\n\n  return (\n    <div\n      // data-active attribute is used here to increase the priority/specificity of the selectedClassName prop styles\n      data-active={editor.isActive(\"bold\") ? true : false}\n      className={`${className} ${toolbarBoldScopeClassName}`}\n      style={{ cursor: \"pointer\" }}\n      role=\"button\"\n      onClick={() => editor.chain().focus().toggleMark(\"bold\").run()}\n    >\n      {children}\n    </div>\n  );\n}\nToolbarBold.displayName = \"ToolbarBold\";\n\nexport function registerToolbarBold(loader?: Registerable) {\n  registerComponentHelper(loader, ToolbarBold, {\n    name: `${TIPTAP_COMPONENT_NAME}-toolbar-bold`,\n    displayName: \"Tiptap Bold Toolbar Option\",\n    defaultStyles: {\n      width: \"hug\",\n      padding: \"5px\",\n    },\n    props: {\n      children: {\n        type: \"slot\",\n        hidePlaceholder: true,\n        defaultValue: [\n          {\n            type: \"img\",\n            src: \"https://static1.plasmic.app/bold.svg\",\n          },\n        ],\n      },\n      toolbarBoldScopeClassName: {\n        type: \"styleScopeClass\",\n        scopeName: \"toolbarBold\",\n      } as any,\n      selectedClassName: {\n        type: \"class\",\n        displayName: \"Tool Selected\",\n        selectors: [\n          {\n            selector: \":toolbarBold[data-active=true]\",\n            label: \"Base\",\n          },\n        ],\n      },\n    },\n    importName: \"ToolbarBold\",\n    importPath: \"@plasmicpkgs/tiptap/skinny/registerToolbarBold\",\n    parentComponentName: TIPTAP_COMPONENT_NAME,\n  });\n}\n"],"names":["useCurrentEditor","useTiptapContext","React","registerComponentHelper","TIPTAP_COMPONENT_NAME"],"mappings":";;;;;;;;;;;;;;;;AAaO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,MAAO,EAAA,GAAIA,sBAAiB,EAAA,CAAA;AACpC,EAAM,MAAA,EAAE,IAAK,EAAA,GAAIC,+BAAiB,EAAA,CAAA;AAElC,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,yBAAA,EAA8B,GAAA,KAAA,CAAA;AAE3D,EAAI,IAAA,CAAC,UAAU,CAAC,IAAA;AAAM,IAAO,OAAA,IAAA,CAAA;AAE7B,EACE,uBAAAC,sBAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,aAAa,EAAA,MAAA,CAAO,QAAS,CAAA,MAAM,IAAI,IAAO,GAAA,KAAA;AAAA,MAC9C,SAAA,EAAW,GAAG,SAAa,CAAA,CAAA,EAAA,yBAAA,CAAA,CAAA;AAAA,MAC3B,KAAA,EAAO,EAAE,MAAA,EAAQ,SAAU,EAAA;AAAA,MAC3B,IAAK,EAAA,QAAA;AAAA,MACL,OAAA,EAAS,MAAM,MAAA,CAAO,KAAM,EAAA,CAAE,OAAQ,CAAA,UAAA,CAAW,MAAM,CAAA,CAAE,GAAI,EAAA;AAAA,KAAA;AAAA,IAE5D,QAAA;AAAA,GACH,CAAA;AAEJ,CAAA;AACA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAEnB,SAAS,oBAAoB,MAAuB,EAAA;AACzD,EAAAC,sCAAA,CAAwB,QAAQ,WAAa,EAAA;AAAA,IAC3C,MAAM,CAAG,EAAAC,oCAAA,CAAA,aAAA,CAAA;AAAA,IACT,WAAa,EAAA,4BAAA;AAAA,IACb,aAAe,EAAA;AAAA,MACb,KAAO,EAAA,KAAA;AAAA,MACP,OAAS,EAAA,KAAA;AAAA,KACX;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAU,EAAA;AAAA,QACR,IAAM,EAAA,MAAA;AAAA,QACN,eAAiB,EAAA,IAAA;AAAA,QACjB,YAAc,EAAA;AAAA,UACZ;AAAA,YACE,IAAM,EAAA,KAAA;AAAA,YACN,GAAK,EAAA,sCAAA;AAAA,WACP;AAAA,SACF;AAAA,OACF;AAAA,MACA,yBAA2B,EAAA;AAAA,QACzB,IAAM,EAAA,iBAAA;AAAA,QACN,SAAW,EAAA,aAAA;AAAA,OACb;AAAA,MACA,iBAAmB,EAAA;AAAA,QACjB,IAAM,EAAA,OAAA;AAAA,QACN,WAAa,EAAA,eAAA;AAAA,QACb,SAAW,EAAA;AAAA,UACT;AAAA,YACE,QAAU,EAAA,gCAAA;AAAA,YACV,KAAO,EAAA,MAAA;AAAA,WACT;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,UAAY,EAAA,aAAA;AAAA,IACZ,UAAY,EAAA,gDAAA;AAAA,IACZ,mBAAqB,EAAAA,oCAAA;AAAA,GACtB,CAAA,CAAA;AACH;;;;;"}

package/skinny/registerToolbarBold.esm.js

@@ -0,0 +1,71 @@
+import { useCurrentEditor } from '@tiptap/react';
+import React from 'react';
+import { u as useTiptapContext, r as registerComponentHelper, T as TIPTAP_COMPONENT_NAME } from './registerTiptap-6a2d0bb4.esm.js';
+import '@tiptap/extension-document';
+import '@tiptap/extension-paragraph';
+import '@tiptap/extension-text';
+import 'antd';
+import '@plasmicapp/host/registerComponent';
+import '@plasmicapp/host/registerGlobalContext';
+
+function ToolbarBold(props) {
+  const { editor } = useCurrentEditor();
+  const { bold } = useTiptapContext();
+  const { className, children, toolbarBoldScopeClassName } = props;
+  if (!editor || !bold)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-active": editor.isActive("bold") ? true : false,
+      className: `${className} ${toolbarBoldScopeClassName}`,
+      style: { cursor: "pointer" },
+      role: "button",
+      onClick: () => editor.chain().focus().toggleMark("bold").run()
+    },
+    children
+  );
+}
+ToolbarBold.displayName = "ToolbarBold";
+function registerToolbarBold(loader) {
+  registerComponentHelper(loader, ToolbarBold, {
+    name: `${TIPTAP_COMPONENT_NAME}-toolbar-bold`,
+    displayName: "Tiptap Bold Toolbar Option",
+    defaultStyles: {
+      width: "hug",
+      padding: "5px"
+    },
+    props: {
+      children: {
+        type: "slot",
+        hidePlaceholder: true,
+        defaultValue: [
+          {
+            type: "img",
+            src: "https://static1.plasmic.app/bold.svg"
+          }
+        ]
+      },
+      toolbarBoldScopeClassName: {
+        type: "styleScopeClass",
+        scopeName: "toolbarBold"
+      },
+      selectedClassName: {
+        type: "class",
+        displayName: "Tool Selected",
+        selectors: [
+          {
+            selector: ":toolbarBold[data-active=true]",
+            label: "Base"
+          }
+        ]
+      }
+    },
+    importName: "ToolbarBold",
+    importPath: "@plasmicpkgs/tiptap/skinny/registerToolbarBold",
+    parentComponentName: TIPTAP_COMPONENT_NAME
+  });
+}
+
+export { ToolbarBold, registerToolbarBold };
+//# sourceMappingURL=registerToolbarBold.esm.js.map