@domternal/react 0.14.0 → 0.15.0

package/README.md

@@ -19,7 +19,7 @@ and React 19.
 pnpm add @domternal/react @domternal/core react react-dom
 ```
 
-`react` (>=18), `react-dom` (>=18), and `@domternal/core` (>=0.14.0) are peer dependencies. Import the theme
+`react` (>=18), `react-dom` (>=18), and `@domternal/core` (>=0.15.0) are peer dependencies. Import the theme
 ([`@domternal/theme`](https://www.npmjs.com/package/@domternal/theme)) in your entry CSS for default styling:
 
 ```css

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { DependencyList, ReactNode, HTMLAttributes, Ref, RefObject, KeyboardEvent, ElementType, RefCallback } from 'react';
-import { AnyExtension, Content, FocusPosition, Editor, JSONContent, IconSet, ToolbarLayoutEntry, BubbleMenuOptions, FloatingMenuOptions, FloatingMenuItemsOverride, FloatingMenuKeymap } from '@domternal/core';
+import { AnyExtension, Content, EditorPreset, FocusPosition, Editor, JSONContent, IconSet, ToolbarLayoutEntry, BubbleMenuOptions, FloatingMenuOptions, FloatingMenuItemsOverride, FloatingMenuKeymap } from '@domternal/core';
 export { AnyExtension, Content, Editor, FocusPosition, GenerateHTMLOptions, GenerateJSONOptions, GenerateTextOptions, JSONContent, generateHTML, generateJSON, generateText } from '@domternal/core';
 
 declare const DEFAULT_EXTENSIONS: AnyExtension[];
@@ -17,6 +17,12 @@ interface UseEditorOptions {
     content?: Content;
     /** Whether the editor is editable. @default true */
     editable?: boolean;
+    /**
+     * Editing experience preset. `'notion'` paints `dm-notion-mode` on the
+     * `.dm-editor` wrapper and switches preset-aware extensions to their
+     * Notion behavior, replacing the hand-written class. Create-time only.
+     */
+    preset?: EditorPreset;
     /** Where to autofocus on mount. @default false */
     autofocus?: FocusPosition;
     /** Output format for content comparison. @default 'html' */

package/dist/index.js

@@ -53,7 +53,8 @@ function useEditor(options = {}, deps) {
       extensions: [...defaults, ...extensions],
       content: initialContent,
       editable,
-      autofocus: focus
+      autofocus: focus,
+      ...options.preset ? { preset: options.preset } : {}
     });
     wireEvents(ed);
     instanceRef.current = ed;
@@ -96,6 +97,7 @@ function useEditor(options = {}, deps) {
       const mount = editorRef.current;
       if (mount && existing.view.dom.parentElement !== mount) {
         mount.appendChild(existing.view.dom);
+        existing.adoptPresetClass();
       }
       callbacksRef.current.onCreate?.(existing);
       return () => {
@@ -260,6 +262,7 @@ function useToolbarController(editor, layout) {
   const toolbarRef = useRef(null);
   const cleanupFloatingRef = useRef(null);
   const clickOutsideRef = useRef(null);
+  const escapeKeydownRef = useRef(null);
   const dismissOverlayRef = useRef(null);
   const editorElRef = useRef(null);
   const syncStateRafRef = useRef(0);
@@ -295,6 +298,18 @@ function useToolbarController(editor, layout) {
     };
     clickOutsideRef.current = clickOutside;
     document.addEventListener("mousedown", clickOutside);
+    const escapeKeydown = (e) => {
+      if (!controller.openDropdown) return;
+      if (e.key !== "Escape") return;
+      if (toolbarRef.current?.contains(document.activeElement)) return;
+      cleanupFloatingRef.current?.();
+      cleanupFloatingRef.current = null;
+      controller.closeDropdown();
+      syncState();
+      e.preventDefault();
+    };
+    escapeKeydownRef.current = escapeKeydown;
+    document.addEventListener("keydown", escapeKeydown);
     const editorEl = editor.view.dom.closest(".dm-editor");
     editorElRef.current = editorEl;
     if (editorEl) {
@@ -317,6 +332,10 @@ function useToolbarController(editor, layout) {
         document.removeEventListener("mousedown", clickOutsideRef.current);
         clickOutsideRef.current = null;
       }
+      if (escapeKeydownRef.current) {
+        document.removeEventListener("keydown", escapeKeydownRef.current);
+        escapeKeydownRef.current = null;
+      }
       if (dismissOverlayRef.current && editorElRef.current) {
         editorElRef.current.removeEventListener("dm:dismiss-overlays", dismissOverlayRef.current);
         dismissOverlayRef.current = null;
@@ -603,6 +622,19 @@ function getInlineStyleAtCursor(editor, prop) {
     return null;
   }
 }
+function useInnerHtml() {
+  const cache = useRef(null);
+  cache.current ??= /* @__PURE__ */ new Map();
+  return (html) => {
+    const store = cache.current;
+    let prop = store.get(html);
+    if (prop === void 0) {
+      prop = { __html: html };
+      store.set(html, prop);
+    }
+    return prop;
+  };
+}
 function ToolbarButton({
   item,
   isActive,
@@ -614,6 +646,7 @@ function ToolbarButton({
   onClick,
   onFocus
 }) {
+  const innerHtml = useInnerHtml();
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -625,7 +658,7 @@ function ToolbarButton({
       title: tooltip,
       tabIndex,
       disabled: isDisabled,
-      dangerouslySetInnerHTML: { __html: iconHtml },
+      dangerouslySetInnerHTML: innerHtml(iconHtml),
       onMouseDown: (e) => {
         e.preventDefault();
       },
@@ -644,6 +677,7 @@ function ToolbarDropdownPanel({
   getCachedItemContent,
   onItemClick
 }) {
+  const innerHtml = useInnerHtml();
   if (dropdown.layout === "grid") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -678,7 +712,7 @@ function ToolbarDropdownPanel({
               role: "menuitem",
               tabIndex: -1,
               "aria-label": sub.label,
-              dangerouslySetInnerHTML: { __html: getCachedItemContent(sub.icon, sub.label) },
+              dangerouslySetInnerHTML: innerHtml(getCachedItemContent(sub.icon, sub.label)),
               onMouseDown: (e) => {
                 e.preventDefault();
               },
@@ -709,7 +743,7 @@ function ToolbarDropdownPanel({
           ref: (el) => {
             if (el && sub.style) el.setAttribute("style", sub.style);
           },
-          dangerouslySetInnerHTML: { __html: getCachedItemContent(sub.icon, sub.label, dropdown.displayMode) },
+          dangerouslySetInnerHTML: innerHtml(getCachedItemContent(sub.icon, sub.label, dropdown.displayMode)),
           onMouseDown: (e) => {
             e.preventDefault();
           },
@@ -735,6 +769,7 @@ function ToolbarDropdown({
   onItemClick,
   onFocus
 }) {
+  const innerHtml = useInnerHtml();
   return /* @__PURE__ */ jsxs("div", { className: "dm-toolbar-dropdown-wrapper", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -748,7 +783,7 @@ function ToolbarDropdown({
         tabIndex,
         disabled: isDisabled,
         "data-dropdown": dropdown.name,
-        dangerouslySetInnerHTML: { __html: triggerHtml },
+        dangerouslySetInnerHTML: innerHtml(triggerHtml),
         onMouseDown: (e) => {
           e.preventDefault();
         },
@@ -1140,7 +1175,8 @@ function useBubbleMenu(options) {
       }
       setTrailing({
         isNodeSelection: isNode,
-        showColorPickerButton: hasNotionColorPicker,
+        // Hidden without a live notionColorOpen listener: the trigger would be dead.
+        showColorPickerButton: hasNotionColorPicker && ed.listenerCount("notionColorOpen") > 0,
         showBlockMenuButton: hasBlockContextMenu,
         blockMenuButtonDisabled: blockMenuDisabled,
         currentTextColorVar: textVar,
@@ -1297,6 +1333,7 @@ function DomternalBubbleMenu({
   }, []);
   const colorBtnRef = useRef(null);
   const blockMenuBtnRef = useRef(null);
+  const innerHtml = useInnerHtml();
   return /* @__PURE__ */ jsxs("div", { ref: menuRef, className: "dm-bubble-menu", role: "toolbar", "aria-label": "Text formatting", children: [
     resolvedItems.map((item) => {
       if (item.type === "separator") {
@@ -1335,7 +1372,7 @@ function DomternalBubbleMenu({
           title: btn.label,
           "aria-label": btn.label,
           "aria-pressed": active,
-          dangerouslySetInnerHTML: { __html: getCachedHtml(btn.icon) },
+          dangerouslySetInnerHTML: innerHtml(getCachedHtml(btn.icon)),
           onMouseDown: (e) => {
             e.preventDefault();
           },
@@ -1395,7 +1432,7 @@ function DomternalBubbleMenu({
           title: trailing.blockMenuButtonDisabled ? "Block actions (select within a single block)" : "More options",
           "aria-label": "More options",
           "aria-haspopup": "menu",
-          dangerouslySetInnerHTML: { __html: getCachedHtml("dotsThree") },
+          dangerouslySetInnerHTML: innerHtml(getCachedHtml("dotsThree")),
           onMouseDown: (e) => {
             e.preventDefault();
           },
@@ -1420,6 +1457,7 @@ function BubbleDropdown({
 }) {
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
+  const innerHtml = useInnerHtml();
   const dropdownActive = dropdown.items.some((sub) => isItemActive(sub));
   const activeChild = dropdown.dynamicIcon ? dropdown.items.find((sub) => isItemActive(sub)) : void 0;
   const triggerIcon = activeChild?.icon ?? dropdown.icon;
@@ -1471,7 +1509,7 @@ function BubbleDropdown({
         "aria-label": dropdown.label,
         title: dropdown.label,
         "data-dropdown": dropdown.name,
-        dangerouslySetInnerHTML: { __html: triggerHtml },
+        dangerouslySetInnerHTML: innerHtml(triggerHtml),
         onMouseDown: (e) => {
           e.preventDefault();
         },
@@ -1496,7 +1534,7 @@ function BubbleDropdown({
               className: `dm-toolbar-dropdown-item${subActive ? " dm-toolbar-dropdown-item--active" : ""}`,
               role: "menuitem",
               "aria-label": sub.label,
-              dangerouslySetInnerHTML: { __html: subHtml },
+              dangerouslySetInnerHTML: innerHtml(subHtml),
               onMouseDown: (e) => {
                 e.preventDefault();
               },
@@ -1682,6 +1720,7 @@ function FloatingMenuItemButton({
   iconHtml,
   onClick
 }) {
+  const innerHtml = useInnerHtml();
   const handleClick = useCallback(() => {
     onClick(item);
   }, [item, onClick]);
@@ -1708,7 +1747,7 @@ function FloatingMenuItemButton({
           {
             className: "dm-floating-menu-item-icon",
             "aria-hidden": "true",
-            dangerouslySetInnerHTML: { __html: iconHtml }
+            dangerouslySetInnerHTML: innerHtml(iconHtml)
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "dm-floating-menu-item-label", children: item.label }),
@@ -2099,6 +2138,7 @@ function DomternalContent({ className }) {
     const editorDom = editor.view.dom;
     if (editorDom.parentElement !== container) {
       container.appendChild(editorDom);
+      editor.adoptPresetClass();
     }
   }, [editor]);
   const classes = className ? `dm-editor ${className}` : "dm-editor";
@@ -2203,6 +2243,7 @@ function EditorContent({ editor, innerRef, ...htmlProps }) {
     const editorDom = editor.view.dom;
     if (editorDom.parentElement !== container) {
       container.appendChild(editorDom);
+      editor.adoptPresetClass();
     }
     return () => {
     };