@multiplatform.one/rich-text 6.0.0

package/dist/cjs/toolbar/ColorPicker.native.js

@@ -0,0 +1,234 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ColorPicker_exports = {};
+__export(ColorPicker_exports, {
+  HighlightColorPicker: () => HighlightColorPicker,
+  TextColorPicker: () => TextColorPicker
+});
+module.exports = __toCommonJS(ColorPicker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_constants = require("../constants.native.js");
+var import_ToolbarButton = require("./ToolbarButton.native.js");
+var import_icons = require("./icons.native.js");
+function ColorSwatch(param) {
+  var {
+    color,
+    isSelected,
+    onPress,
+    isNone
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    width: 24,
+    height: 24,
+    borderRadius: 4,
+    backgroundColor: color || "$background",
+    borderWidth: isSelected ? 2 : 1,
+    borderColor: isSelected ? "$blue10" : "$color6",
+    cursor: "pointer",
+    hoverStyle: {
+      opacity: 0.8
+    },
+    pressStyle: {
+      scale: 0.95
+    },
+    onPress,
+    alignItems: "center",
+    justifyContent: "center",
+    "aria-label": isNone ? "Remove color" : `Color ${color}`,
+    children: isNone && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      position: "absolute",
+      width: 20,
+      height: 2,
+      backgroundColor: "$red10",
+      transform: [{
+        rotate: "45deg"
+      }]
+    })
+  });
+}
+function ColorGrid(param) {
+  var {
+    title,
+    colors,
+    selectedColor,
+    onSelect,
+    maxWidth
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: knobProps.sizeToken,
+      fontWeight: "600",
+      children: title
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      flexWrap: "wrap",
+      gap: "$1",
+      maxWidth,
+      children: colors.map(function (c) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorSwatch, {
+          color: c.value,
+          isSelected: selectedColor === c.value,
+          isNone: c.value === null,
+          onPress: function onPress() {
+            return onSelect(c.value);
+          }
+        }, c.name);
+      })
+    })]
+  });
+}
+function TextColorPicker(param) {
+  var {
+    editorRef,
+    state,
+    disabled
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [open, setOpen] = (0, import_react.useState)(false);
+  var handleSelect = (0, import_react.useCallback)(function (color) {
+    var _editorRef_current;
+    (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.executeCommand("textColor", {
+      color
+    });
+    setOpen(false);
+  }, [editorRef]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+        active: !!state.textColor,
+        disabled,
+        onPress: function onPress() {
+          return setOpen(true);
+        },
+        "aria-label": "Text Color",
+        tooltip: "Text Color",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.TextColorIcon, {
+          color: state.textColor
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
+      ...knobProps.panelPadding,
+      backgroundColor: "$background",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      elevation: knobProps.elevation,
+      enterStyle: {
+        opacity: 0,
+        y: -5
+      },
+      exitStyle: {
+        opacity: 0,
+        y: -5
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, {
+        borderColor: "$borderColor",
+        backgroundColor: "$background"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorGrid, {
+        title: "Text Color",
+        colors: import_constants.TEXT_COLORS,
+        selectedColor: state.textColor,
+        onSelect: handleSelect,
+        maxWidth: 160
+      })]
+    })]
+  });
+}
+function HighlightColorPicker(param) {
+  var {
+    editorRef,
+    state,
+    disabled
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [open, setOpen] = (0, import_react.useState)(false);
+  var handleSelect = (0, import_react.useCallback)(function (color) {
+    var _editorRef_current;
+    (_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.executeCommand("highlight", {
+      color
+    });
+    setOpen(false);
+  }, [editorRef]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      asChild: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+        active: !!state.highlightColor,
+        disabled,
+        onPress: function onPress() {
+          return setOpen(true);
+        },
+        "aria-label": "Highlight Color",
+        tooltip: "Highlight",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.HighlightIcon, {
+          color: state.highlightColor
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover.Content, {
+      ...knobProps.panelPadding,
+      backgroundColor: "$background",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      elevation: knobProps.elevation,
+      enterStyle: {
+        opacity: 0,
+        y: -5
+      },
+      exitStyle: {
+        opacity: 0,
+        y: -5
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, {
+        borderColor: "$borderColor",
+        backgroundColor: "$background"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorGrid, {
+        title: "Highlight",
+        colors: import_constants.HIGHLIGHT_COLORS,
+        selectedColor: state.highlightColor,
+        onSelect: handleSelect,
+        maxWidth: 130
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=ColorPicker.native.js.map

package/dist/cjs/toolbar/ColorPicker.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ColorPicker_exports","__export","HighlightColorPicker","TextColorPicker","module","exports","import_jsx_runtime","require","import_react","import_theme","import_tamagui","import_constants","import_ToolbarButton","import_icons","ColorSwatch","param","color","isSelected","onPress","isNone","jsx","View","width","height","borderRadius","backgroundColor","borderWidth","borderColor","cursor","hoverStyle","opacity","pressStyle","scale","alignItems","justifyContent","children","position","transform","rotate","ColorGrid","title","colors","selectedColor","onSelect","maxWidth","knobProps","useResolvedKnobs","jsxs","YStack","gap","Text","fontSize","sizeToken","fontWeight","XStack","flexWrap","map","c","name","editorRef","state","disabled","open","setOpen","useState","handleSelect","useCallback","_editorRef_current","current","executeCommand","Popover","onOpenChange","placement","Trigger","asChild","ToolbarButton","active","textColor","tooltip","TextColorIcon","Content","panelPadding","elevation","enterStyle","y","exitStyle","Arrow","TEXT_COLORS","highlightColor","HighlightIcon"],"sources":["../../../src/toolbar/ColorPicker.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/toolbar/FixedToolbar.cjs

@@ -0,0 +1,221 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var FixedToolbar_exports = {};
+__export(FixedToolbar_exports, {
+  FixedToolbar: () => FixedToolbar
+});
+module.exports = __toCommonJS(FixedToolbar_exports);
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_types = require("../types.cjs");
+var import_styled = require("../styled.cjs");
+var import_ToolbarButton = require("./ToolbarButton.cjs");
+var import_ToolbarGroup = require("./ToolbarGroup.cjs");
+var import_useHorizontalScroll = require("./useHorizontalScroll.cjs");
+var import_icons = require("./icons.cjs");
+var import_ColorPicker = require("./ColorPicker.cjs");
+var import_HeadingPicker = require("./HeadingPicker.cjs");
+var import_ListPicker = require("./ListPicker.cjs");
+var import_LinkDialog = require("./LinkDialog.cjs");
+var import_ImageDialog = require("./ImageDialog.cjs");
+var import_MoreDropdown = require("./MoreDropdown.cjs");
+var import_shortcuts = require("./shortcuts.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function isSectionVisible(section, sections) {
+  if (!sections) return true;
+  return sections.includes(section);
+}
+function FixedToolbar({
+  editorRef,
+  state = import_types.defaultEditorState,
+  sections,
+  hasError
+}) {
+  const scrollerRef = (0, import_react.useRef)(null);
+  const {
+    arrowLeft,
+    arrowRight,
+    arrowScrollDirRef,
+    updateArrows
+  } = (0, import_useHorizontalScroll.useHorizontalScrollArrows)();
+  (0, import_useHorizontalScroll.useHorizontalScroll)(scrollerRef);
+  (0, import_react.useEffect)(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const handleUpdate = () => updateArrows(el);
+    handleUpdate();
+    el.addEventListener("scroll", handleUpdate, {
+      passive: true
+    });
+    const resizeObserver = new ResizeObserver(handleUpdate);
+    resizeObserver.observe(el);
+    return () => {
+      el.removeEventListener("scroll", handleUpdate);
+      resizeObserver.disconnect();
+    };
+  }, [updateArrows]);
+  const executeCommand = (0, import_react.useCallback)((command, payload) => {
+    editorRef.current?.executeCommand(command, payload);
+  }, [editorRef]);
+  const visible = section => isSectionVisible(section, sections);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_styled.ToolbarFrame, {
+    hasError,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("style", {
+      children: `
+          .toolbar-scroller {
+            flex: 1;
+            overflow-x: auto;
+            overflow-y: hidden;
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+          }
+          .toolbar-scroller::-webkit-scrollbar {
+            display: none;
+          }
+        `
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_useHorizontalScroll.HorizontalScrollArrow, {
+      direction: "left",
+      scrollRef: scrollerRef,
+      visible: arrowLeft,
+      arrowScrollDirRef
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      ref: scrollerRef,
+      className: "toolbar-scroller",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        gap: "$1",
+        paddingHorizontal: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_ToolbarGroup.ToolbarGroup, {
+          visible: visible("history"),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+            disabled: !state.canUndo,
+            onPress: () => executeCommand("undo"),
+            "aria-label": "Undo",
+            tooltip: import_shortcuts.SHORTCUTS.undo,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.UndoIcon, {})
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+            disabled: !state.canRedo,
+            onPress: () => executeCommand("redo"),
+            "aria-label": "Redo",
+            tooltip: import_shortcuts.SHORTCUTS.redo,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.RedoIcon, {})
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_ToolbarGroup.ToolbarGroup, {
+          visible: visible("formatting"),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+            active: state.isBold,
+            onPress: () => executeCommand("bold"),
+            "aria-label": "Bold",
+            tooltip: import_shortcuts.SHORTCUTS.bold,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.BoldIcon, {
+              children: "B"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+            active: state.isItalic,
+            onPress: () => executeCommand("italic"),
+            "aria-label": "Italic",
+            tooltip: import_shortcuts.SHORTCUTS.italic,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.ItalicIcon, {
+              children: "I"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+            active: state.isUnderline,
+            onPress: () => executeCommand("underline"),
+            "aria-label": "Underline",
+            tooltip: import_shortcuts.SHORTCUTS.underline,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.UnderlineIcon, {
+              children: "U"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+            active: state.isStrike,
+            onPress: () => executeCommand("strike"),
+            "aria-label": "Strikethrough",
+            tooltip: import_shortcuts.SHORTCUTS.strike,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.StrikeIcon, {
+              children: "S"
+            })
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_ToolbarGroup.ToolbarGroup, {
+          visible: visible("color"),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ColorPicker.TextColorPicker, {
+            editorRef,
+            state
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ColorPicker.HighlightColorPicker, {
+            editorRef,
+            state
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarGroup.ToolbarGroup, {
+          visible: visible("heading"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_HeadingPicker.HeadingPicker, {
+            editorRef,
+            state
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarGroup.ToolbarGroup, {
+          visible: visible("list"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListPicker.ListPicker, {
+            editorRef,
+            state
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_ToolbarGroup.ToolbarGroup, {
+          visible: visible("block"),
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+            active: state.isBlockquote,
+            onPress: () => executeCommand("blockquote"),
+            "aria-label": "Blockquote",
+            tooltip: import_shortcuts.SHORTCUTS.blockquote,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.BlockquoteIcon, {})
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+            active: state.isCodeBlock,
+            onPress: () => executeCommand("codeBlock"),
+            "aria-label": "Code Block",
+            tooltip: import_shortcuts.SHORTCUTS.codeBlock,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_icons.CodeBlockIcon, {})
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarGroup.ToolbarGroup, {
+          visible: visible("link"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_LinkDialog.LinkDialog, {
+            editorRef,
+            state
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarGroup.ToolbarGroup, {
+          visible: visible("image"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageDialog.ImageDialog, {
+            editorRef
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarGroup.ToolbarGroup, {
+          visible: !sections || sections.some(s => ["formatting", "alignment", "clear", "block"].includes(s)),
+          showSeparator: false,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_MoreDropdown.MoreDropdown, {
+            editorRef,
+            state
+          })
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_useHorizontalScroll.HorizontalScrollArrow, {
+      direction: "right",
+      scrollRef: scrollerRef,
+      visible: arrowRight,
+      arrowScrollDirRef
+    })]
+  });
+}