@lazlon-platform/html-editor 0.3.6 → 0.4.0

package/lib/hooks/batch.ts

@@ -1,4 +1,4 @@
-import { isEqual, pick } from "es-toolkit"
+import { isEqual } from "es-toolkit"
 import { useRef } from "react"
 import { useComputed } from "react-bolt"
 import { type HistoryAction } from "../model/history"
@@ -90,7 +90,8 @@ export function useBatchSet() {
       push = true
       const nextValues = typeof set === "function" ? set(node) : set
       const keys = Object.keys(nextValues) as WritableKeys<N>[]
-      prev.push(["set-node-props", [node.id, pick(node, keys)]])
+      const prevValues = Object.fromEntries(keys.map((key) => [key, node[key]]))
+      prev.push(["set-node-props", [node.id, prevValues]])
       next.push(["set-node-props", [node.id, nextValues]])
       Object.assign(node, nextValues)
     }

package/lib/hooks/textMarks.ts

@@ -1,10 +1,10 @@
 import { isEqual } from "es-toolkit"
-import { useEffect, useState } from "react"
-import { useComputed } from "react-bolt"
+import { useCallback, useRef, useSyncExternalStore } from "react"
+import { effect, useComputed } from "react-bolt"
 import { TextNode } from "../model"
 import { EditableNode } from "../model/node/editable"
 import { FormattableNode } from "../model/node/formattable"
-import { useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
+import { useBatchSet, useNodeFieldBatch } from "./batch"
 
 function mergeField<T>(values: T[]): T | null {
   if (values.length === 0) return null
@@ -12,14 +12,17 @@ function mergeField<T>(values: T[]): T | null {
   return rest.some((v) => v !== first) ? null : first
 }
 
-function selector(node: EditableNode) {
+function editableProps(node: EditableNode) {
   const e = node.tiptap
   const { color, fontSize, fontFamily, letterSpacing, lineHeight } =
     e.getAttributes("textStyle")
 
-  const size = fontSize
-    ? parseInt(fontSize)
-    : Math.floor(parseFloat(getComputedStyle(document.documentElement).fontSize))
+  const size =
+    node instanceof TextNode
+      ? node.size
+      : fontSize
+        ? parseInt(fontSize)
+        : Math.floor(parseFloat(getComputedStyle(document.documentElement).fontSize))
 
   return {
     node,
@@ -39,28 +42,36 @@ function selector(node: EditableNode) {
 }
 
 function useTiptapState(editables: Array<EditableNode>) {
-  const [state, setState] = useState(() => editables.map(selector))
+  const props = useRef(editables.map(editableProps))
 
-  useNodeField(
-    editables.filter((n) => n instanceof TextNode),
-    "scale",
-    NaN,
+  return useSyncExternalStore(
+    useCallback(
+      (callback) => {
+        editables.map((e) => e.tiptap.on("transaction", callback))
+        const textNodes = editables.filter((e) => e instanceof TextNode)
+        // HACK: react-bolt does not expose .subscribe on store fields
+        const dispose = effect(() => {
+          for (const text of textNodes) {
+            void text.size
+          }
+          callback()
+        })
+        return () => {
+          dispose()
+          editables.map((e) => e.tiptap.off("transaction", callback))
+        }
+      },
+      [editables],
+    ),
+    useCallback(() => {
+      const nextProps = editables.map(editableProps)
+      if (isEqual(props.current, nextProps)) {
+        return props.current
+      } else {
+        return (props.current = nextProps)
+      }
+    }, [editables]),
   )
-
-  useEffect(() => {
-    function update() {
-      const newState = editables.map(selector)
-      if (!isEqual(newState, state)) setState(newState)
-    }
-
-    editables.map((e) => e.tiptap.on("transaction", update))
-    return () => void editables.map((e) => e.tiptap.off("transaction", update))
-  }, [editables, state, setState])
-
-  return state.map(({ node, ...s }) => {
-    const scale = node instanceof TextNode ? node.scale : 1
-    return { ...s, size: s.size * scale }
-  })
 }
 
 function formattableProps(node: FormattableNode) {
@@ -150,19 +161,24 @@ function useTextMarksState(
 }
 
 function useFocusedTiptap(editables: EditableNode[]) {
-  const [focused, setFocused] = useState(EditableNode.getFocused(editables))
-
-  useEffect(() => {
-    const dispose = editables.map((e) => {
-      const onFocus = () => setFocused(e)
-      e.tiptap.on("focus", onFocus)
-      return () => e.tiptap.off("focus", onFocus)
-    })
-
-    return () => void dispose.map((cb) => cb())
-  }, [editables, setFocused])
+  return useSyncExternalStore(
+    useCallback(
+      (callback) => {
+        const dispose = editables.map((e) => {
+          e.tiptap.on("focus", callback)
+          return () => e.tiptap.off("focus", callback)
+        })
 
-  return focused
+        return () => {
+          dispose.forEach((cb) => cb())
+        }
+      },
+      [editables],
+    ),
+    useCallback(() => {
+      return EditableNode.getFocused(editables)
+    }, [editables]),
+  )
 }
 
 // don't forget a unique key `selection.map((n) => n.id).join("")` on the parent component
@@ -207,18 +223,19 @@ export function useTextMarks(props: {
     },
     setSize(size: number) {
       if (focused) {
-        const scale = focused instanceof TextNode ? focused.scale : 1
-        focused.tiptap.commands.setFontSize(`${size / scale}px`)
+        if (focused instanceof TextNode) {
+          batchSet([focused], { size })
+        } else {
+          focused.tiptap.commands.setFontSize(`${size}px`)
+        }
       } else {
-        editables.map((e) => {
-          const scale = e instanceof TextNode ? e.scale : 1
-          e.tiptap
-            .chain()
-            .selectAll()
-            .setFontSize(`${size / scale}px`)
-            .run()
-        })
-        batchSet(formattables, { size })
+        editables
+          .filter((e) => !(e instanceof TextNode))
+          .map((e) => {
+            e.tiptap.chain().selectAll().setFontSize(`${size}px`).run()
+          })
+        const textNodes = editables.filter((e) => e instanceof TextNode)
+        batchSet([...formattables, ...textNodes], { size })
       }
     },
     setFamily(family: string | null) {

package/lib/model/node/text.ts

@@ -4,8 +4,7 @@ import type { Page } from "../page"
 import { EditableNode, type EditableNodeProps } from "./editable"
 import type { SerializedNode } from "../node"
 
-export type TextNodeProps = EditableNodeProps &
-  Partial<Pick<TextNode, "halign" | "scale">>
+export type TextNodeProps = EditableNodeProps & Partial<Pick<TextNode, "halign" | "size">>
 
 export class TextNode extends EditableNode {
   get name() {
@@ -13,21 +12,27 @@ export class TextNode extends EditableNode {
   }
 
   @state accessor halign: "left" | "center" | "right" | "justify"
-  @state accessor scale: number = 1
+  @state accessor size: number = 16
   @state accessor contentHeight: number = 24
 
   @computed get height(): number {
-    return this.contentHeight * this.scale
+    return this.contentHeight
   }
 
   set height(n: number) {
-    this.scale = n / this.contentHeight
+    const target = Math.max(1, n)
+
+    if (this.contentHeight > 0) {
+      this.size = (this.size * target) / this.contentHeight
+    }
+
+    this.contentHeight = target
   }
 
-  constructor(editor: Editor, page: Page, { halign, scale, ...props }: TextNodeProps) {
+  constructor(editor: Editor, page: Page, { halign, size, ...props }: TextNodeProps) {
     super(editor, page, props)
     this.halign = halign ?? "center"
-    this.scale = scale ?? 1
+    this.size = size ?? 16
 
     this.tiptap.on("transaction", () => {
       const height = this.tiptap.view.dom.clientHeight
@@ -45,8 +50,8 @@ export class TextNode extends EditableNode {
   }
 
   props(): TextNodeProps {
-    const { halign, scale } = this
-    return { ...super.props(), halign, scale }
+    const { halign, size } = this
+    return { ...super.props(), halign, size }
   }
 
   serialize(): SerializedNode<this["name"], TextNodeProps> {

package/lib/ui/node/TextContent.tsx

@@ -13,7 +13,7 @@ export function TextContent(props: {
   const { node, placeholder, isStatic } = props
   const editor = useEditor()
   const selection = useStore(editor, "selection")
-  const [halign, scale, height] = useStore(node, "halign", "scale", "height")
+  const [halign, size] = useStore(node, "halign", "size")
 
   useEffect(() => {
     if (node.tiptap.isEmpty && !selection.has(node)) {
@@ -22,20 +22,17 @@ export function TextContent(props: {
   }, [node, selection])
 
   return (
-    <div style={{ height }} className="overflow-clip m-auto">
-      <EditableContent
-        node={node}
-        isStatic={isStatic}
-        placeholder={placeholder}
-        style={{ transform: `scale(${scale})` }}
-        className={clsx(
-          "**:whitespace-nowrap",
-          halign === "left" && "text-left origin-top-left",
-          halign === "center" && "text-center origin-top",
-          halign === "right" && "text-right origin-top-right",
-          halign === "justify" && "text-justify *:w-full origin-top",
-        )}
-      />
-    </div>
+    <EditableContent
+      node={node}
+      isStatic={isStatic}
+      placeholder={placeholder}
+      style={{ fontSize: `${size}px` }}
+      className={clsx(
+        halign === "left" && "text-left origin-top-left",
+        halign === "center" && "text-center origin-top",
+        halign === "right" && "text-right origin-top-right",
+        halign === "justify" && "text-justify *:w-full origin-top",
+      )}
+    />
   )
 }

package/package.json

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