@lazlon-platform/html-editor 0.3.4 → 0.3.5

package/lib/hooks/textMarks.ts

@@ -149,39 +149,8 @@ function useTextMarksState(
   return null
 }
 
-// HACK:
-// Clicking on the toolbar blurs the editor, but for editing actions we need to track it.
-// We cannot do it purely in the `useFocusedTiptap` hook because the component using it
-// might render *after* the blur, e.g the sidebar, but the `useTextMarks` hook operates
-// on locally selected editor instances, e.g CalendarFields in the sidebar. We might be
-// able to preserve the local state with an <Activity> but I feel like it makes more sense
-// to handle it here, since there might only be one focused editor at a time either way.
-let lastFocusedEditor: EditableNode | null = null
-
-function getFocusedEditor(node: EditableNode[]) {
-  const focused = node.find((e) => e.tiptap.isFocused)
-
-  if (focused) {
-    return (lastFocusedEditor = focused)
-  }
-
-  if (lastFocusedEditor && node.includes(lastFocusedEditor)) {
-    return lastFocusedEditor
-  }
-
-  return null
-}
-
-export function blurNode(node: EditableNode) {
-  if (lastFocusedEditor === node) {
-    node.tiptap.commands.blur()
-    node.tiptap.commands.selectAll()
-    lastFocusedEditor = null
-  }
-}
-
 function useFocusedTiptap(editables: EditableNode[]) {
-  const [focused, setFocused] = useState(getFocusedEditor(editables))
+  const [focused, setFocused] = useState(EditableNode.getFocused(editables))
 
   useEffect(() => {
     const dispose = editables.map((e) => {

package/lib/model/node/editable/index.ts

@@ -13,6 +13,7 @@ export type EditableNodeProps = NodeProps &
 export abstract class EditableNode extends Node {
   @state accessor contentRef: HTMLElement | null = null
   @state private accessor _isEmpty: boolean = true
+  @state private accessor _isFocused: boolean = false
   @state private accessor _content: JSONContent = { type: "doc", content: [] }
 
   @state accessor lineHeight: number
@@ -33,6 +34,10 @@ export abstract class EditableNode extends Node {
     return this._isEmpty
   }
 
+  @computed get isFocused() {
+    return this._isFocused
+  }
+
   set locked(isLocked: boolean) {
     super.locked = isLocked
     // this is invoked from super() which has no tiptap, hence the ?
@@ -45,12 +50,25 @@ export abstract class EditableNode extends Node {
 
   readonly tiptap = new Tiptap({
     extensions: TiptapExtensions,
-    onUpdate: () => {
-      this._content = this.tiptap.getJSON()
-      this._isEmpty = this.tiptap.isEmpty
+    onUpdate: ({ editor }) => {
+      this._content = editor.getJSON()
+      this._isEmpty = editor.isEmpty
+    },
+    onFocus: () => {
+      /**
+       * The blur event does not work, because we hide the UI before.
+       * {@link EditableNode.blur} is invoked in `EditableContent`
+       */
+      this._isFocused = true
     },
   })
 
+  blur() {
+    this.tiptap.commands.selectAll()
+    this._isFocused = false
+    EditableNode.lastFocused = null
+  }
+
   constructor(
     editor: Editor,
     page: Page,
@@ -81,4 +99,25 @@ export abstract class EditableNode extends Node {
   serialize(): SerializedNode<string, EditableNodeProps> {
     return super.serialize()
   }
+
+  /**
+   * {@link Tiptap.isFocused} uses the DOM element which gets blurred when
+   * an interactive element, such as a button is clicked on another panel.
+   * We need to track the last focused tiptap instance for editing purposes.
+   */
+  private static lastFocused: EditableNode | null = null
+
+  static getFocused(node: EditableNode[]) {
+    const focused = node.find((e) => e.tiptap.isFocused)
+
+    if (focused) {
+      return (this.lastFocused = focused)
+    }
+
+    if (this.lastFocused && node.includes(this.lastFocused)) {
+      return this.lastFocused
+    }
+
+    return null
+  }
 }

package/lib/ui/node/EditableContent.tsx

@@ -4,7 +4,6 @@ import { debounce, isEqual } from "es-toolkit"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useStore } from "react-bolt"
 import { useEditor } from "../../hooks/editor"
-import { blurNode } from "../../hooks/textMarks"
 import type { EditableNode, EditableNodeProps } from "../../model/node/editable"
 import { useDoubleClick } from "./useDoubleClick"
 
@@ -38,7 +37,7 @@ export function EditableContent(props: {
 
   useEffect(() => {
     if (!selection.has(node)) {
-      blurNode(node)
+      node.blur()
       setClicked(false)
     }
   }, [selection, node])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazlon-platform/html-editor",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "files": [
     "lib"