@lazlon-platform/html-editor 0.3.2 → 0.3.4

package/lib/hooks/pointer/rotation.ts

@@ -14,6 +14,11 @@ type RotationState = {
   nodes: Array<{ node: Node; deg: number }>
 }
 
+function snappedDeg(startDeg: number, delta: number, shiftKey: boolean) {
+  const rotation = startDeg + delta
+  return shiftKey ? Math.round(rotation / 45) * 45 : rotation
+}
+
 export function useRotation() {
   const start = useRef<RotationState | null>(null)
   const editor = useEditor()
@@ -47,22 +52,26 @@ export function useRotation() {
       editor.action = { action: "rotate", payload: { deg: 0 } }
     },
     onMove({ event }) {
-      if (!start.current) return
-      const { center, anchor, deg, nodes } = start.current
+      const s = start.current
+      if (!s) return
 
-      const next =
-        angle(center, anchor, {
-          x: event.clientX,
-          y: event.clientY,
-        }) - deg
+      const point = { x: event.clientX, y: event.clientY }
+      const deg = angle(s.center, s.anchor, point) - s.deg
 
-      for (const n of nodes) {
-        n.node.rotation = (n.deg + next) % 360
+      for (const n of s.nodes) {
+        n.node.rotation = snappedDeg(n.deg, deg, event.shiftKey)
       }
 
+      const display =
+        s.nodes.length === 1
+          ? s.nodes[0].node.rotation
+          : snappedDeg(s.deg, deg, event.shiftKey)
+
       editor.action = {
         action: "rotate",
-        payload: { deg: nodes.length === 1 ? nodes[0].node.rotation : next },
+        payload: {
+          deg: display,
+        },
       }
     },
     onCancel() {
@@ -73,15 +82,12 @@ export function useRotation() {
       const s = start.current
       if (!s) return
 
-      const deg =
-        angle(s.center, s.anchor, {
-          x: event.clientX,
-          y: event.clientY,
-        }) - s.deg
+      const point = { x: event.clientX, y: event.clientY }
+      const deg = angle(s.center, s.anchor, point) - s.deg
 
       if (s.nodes.length === 0) {
         const [n] = s.nodes
-        const rotation = (n.deg + deg) % 360
+        const rotation = snappedDeg(n.deg, deg, event.shiftKey)
         editor.history.push({
           redo: ["set-node-props", [n.node.id, { rotation }]],
           undo: ["set-node-props", [n.node.id, { rotation: n.deg }]],
@@ -92,7 +98,7 @@ export function useRotation() {
         const undo: HistoryAction[] = []
 
         for (const n of s.nodes) {
-          const rotation = (n.deg + deg) % 360
+          const rotation = snappedDeg(n.deg, deg, event.shiftKey)
           redo.push(["set-node-props", [n.node.id, { rotation }]])
           undo.push(["set-node-props", [n.node.id, { rotation: n.deg }]])
           n.node.rotation = rotation

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 { TextNode } from "../model"
 import { EditableNode } from "../model/node/editable"
 import { FormattableNode } from "../model/node/formattable"
 import { useBatchSet, useNodeField, useNodeFieldBatch } from "./batch"
-import { TextNode } from "../model"
 
 function mergeField<T>(values: T[]): T | null {
   if (values.length === 0) return null
@@ -14,7 +14,9 @@ function mergeField<T>(values: T[]): T | null {
 
 function selector(node: EditableNode) {
   const e = node.tiptap
-  const { color, fontSize, fontFamily, letterSpacing } = e.getAttributes("textStyle")
+  const { color, fontSize, fontFamily, letterSpacing, lineHeight } =
+    e.getAttributes("textStyle")
+
   const size = fontSize
     ? parseInt(fontSize)
     : Math.floor(parseFloat(getComputedStyle(document.documentElement).fontSize))
@@ -31,6 +33,7 @@ function selector(node: EditableNode) {
     color: color as string | null,
     size: size,
     spacing: letterSpacing ? parseFloat(letterSpacing) : 0,
+    lineHeight: lineHeight ? parseFloat(lineHeight) : 0,
     family: fontFamily as string | null,
   }
 }
@@ -71,6 +74,7 @@ function formattableProps(node: FormattableNode) {
     color: node.color,
     size: node.size,
     spacing: node.spacing,
+    lineHeight: node.lineHeight,
     family: node.family,
   }
 }
@@ -85,6 +89,7 @@ type TextMarks = {
   color: string | null
   size: number | null
   spacing: number
+  lineHeight: number
   family: string | null
 }
 
@@ -99,6 +104,7 @@ function mergeState(states: TextMarks[]) {
     color: mergeField(states.map((s) => s.color)),
     size: mergeField(states.map((s) => s.size)),
     spacing: mergeField(states.map((s) => s.spacing)),
+    lineHeight: mergeField(states.map((s) => s.lineHeight)),
     family: mergeField(states.map((s) => s.family)),
   }
 }
@@ -135,6 +141,7 @@ function useTextMarksState(
         state.size ??
         Math.floor(parseFloat(getComputedStyle(document.documentElement).fontSize)),
       spacing: state.spacing ?? 0,
+      lineHeight: state.lineHeight ?? 0,
       family: state.family ?? "Inter",
     }
   }
@@ -167,6 +174,8 @@ function getFocusedEditor(node: EditableNode[]) {
 
 export function blurNode(node: EditableNode) {
   if (lastFocusedEditor === node) {
+    node.tiptap.commands.blur()
+    node.tiptap.commands.selectAll()
     lastFocusedEditor = null
   }
 }
@@ -197,6 +206,7 @@ export function useTextMarks(props: {
   const focused = useFocusedTiptap(editables)
   const formattableColors = useNodeFieldBatch(formattables, "color", "")
   const formattableSpacings = useNodeFieldBatch(formattables, "spacing", 0)
+  const formattableLineHeight = useNodeFieldBatch(formattables, "lineHeight", 0)
   const batchSet = useBatchSet()
 
   return {
@@ -272,5 +282,19 @@ export function useTextMarks(props: {
         }
       }
     },
+    setLineHeight(lineHeight: number, opts: { end: boolean }) {
+      if (focused) {
+        focused.tiptap.commands.setLineHeight(`${lineHeight}`)
+      } else {
+        editables.map((e) =>
+          e.tiptap.chain().selectAll().setLineHeight(`${lineHeight}`).run(),
+        )
+        if (opts.end) {
+          formattableLineHeight.onChangeEnd(lineHeight)
+        } else {
+          formattableLineHeight.onChange(lineHeight)
+        }
+      }
+    },
   }
 }

package/lib/model/editor.ts

@@ -37,11 +37,11 @@ export interface EditorProps {
   schema: Array<NodeConstructor>
   options?: Partial<EditorOptions>
   init?: Partial<SerializedEditor>
-  onChange?: () => void
+  onChange?: (editor: Editor) => void
 }
 
 function unimplemented(): Promise<GoogleWebfont[]> {
-  throw Error("missing implementation")
+  throw Error("@lazlon/html-editor missing googleFonts implementation")
 }
 
 export class Editor {
@@ -106,7 +106,7 @@ export class Editor {
 
   constructor(props: EditorProps) {
     const { schema, options, init } = props
-    this.#onChange = () => props.onChange?.()
+    this.#onChange = () => props.onChange?.(this)
     this.#schema = new Map(schema.map((ctor) => [ctor.prototype.name, ctor]))
 
     this.options = createStore({

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

@@ -12,8 +12,8 @@ export type EditableNodeProps = NodeProps &
 
 export abstract class EditableNode extends Node {
   @state accessor contentRef: HTMLElement | null = null
-  @state private accessor _isEmpty: boolean
-  @state private accessor _content: JSONContent
+  @state private accessor _isEmpty: boolean = true
+  @state private accessor _content: JSONContent = { type: "doc", content: [] }
 
   @state accessor lineHeight: number
 
@@ -22,6 +22,7 @@ export abstract class EditableNode extends Node {
       emitUpdate: false,
     })
     this._content = this.tiptap.getJSON()
+    this._isEmpty = this.tiptap.isEmpty
   }
 
   @computed get content() {
@@ -56,10 +57,8 @@ export abstract class EditableNode extends Node {
     { content, lineHeight, ...props }: EditableNodeProps,
   ) {
     super(editor, page, props)
-    this._content = content ?? { type: "doc", content: [] }
-    this._isEmpty = this.tiptap.isEmpty
     this.lineHeight = lineHeight ?? 1.2
-    this.content = this._content
+    this.content = content ?? { type: "doc", content: [] }
   }
 
   blockMove(event: React.PointerEvent): boolean {

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

@@ -7,12 +7,14 @@ import Strike from "@tiptap/extension-strike"
 import Subscript from "@tiptap/extension-subscript"
 import Superscript from "@tiptap/extension-superscript"
 import Text from "@tiptap/extension-text"
+import { Selection } from "@tiptap/extensions"
 import { TextStyleKit } from "@tiptap/extension-text-style"
 import Underline from "@tiptap/extension-underline"
 import { LetterSpacing } from "./letterSpacing"
 import { PersistentMarks } from "./persistentMarks"
 
 export const TiptapExtensions = [
+  Selection,
   Document,
   Paragraph,
   Text,
@@ -24,10 +26,6 @@ export const TiptapExtensions = [
   Subscript,
   Superscript,
   LetterSpacing,
-  TextStyleKit.configure({
-    lineHeight: {
-      types: ["paragraph"],
-    },
-  }),
+  TextStyleKit,
   PersistentMarks,
 ]

package/lib/ui/node/EditableContent.tsx

@@ -27,7 +27,6 @@ export function EditableContent(props: {
   const onDoubleClick = useDoubleClick(
     useCallback(() => {
       setClicked(true)
-      console.log("hello")
       node.tiptap.commands.focus()
     }, [node, setClicked]),
   )
@@ -39,7 +38,6 @@ export function EditableContent(props: {
 
   useEffect(() => {
     if (!selection.has(node)) {
-      node.tiptap.commands.blur()
       blurNode(node)
       setClicked(false)
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazlon-platform/html-editor",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "files": [
     "lib"
@@ -25,6 +25,7 @@
     "@tiptap/extension-text": "^3.20.0",
     "@tiptap/extension-text-style": "^3.20.0",
     "@tiptap/extension-underline": "^3.20.0",
+    "@tiptap/extensions": "^3.22.4",
     "@tiptap/pm": "^3.20.0",
     "@tiptap/react": "^3.20.0",
     "clsx": "^2.1.1",