@lazlon-platform/html-editor 0.1.0

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

@@ -0,0 +1,85 @@
+import { Editor as Tiptap, type JSONContent } from "@tiptap/react"
+import { computed, state } from "react-bolt"
+import type { Editor } from "../../editor"
+import { Node, type NodeProps, type SerializedNode } from "../../node"
+import type { Page } from "../../page"
+import { TiptapExtensions } from "./tiptapExtensions"
+
+export { TiptapExtensions }
+
+export type EditableNodeProps = NodeProps &
+  Partial<Pick<EditableNode, "content" | "lineHeight">>
+
+export abstract class EditableNode extends Node {
+  @state accessor contentRef: HTMLElement | null = null
+  @state private accessor _isEmpty: boolean
+  @state private accessor _content: JSONContent
+
+  @state accessor lineHeight: number
+
+  set content(value: JSONContent) {
+    this.tiptap.commands.setContent(value, {
+      emitUpdate: false,
+    })
+    this._content = this.tiptap.getJSON()
+  }
+
+  @computed get content() {
+    return this._content
+  }
+
+  @computed get isEmpty() {
+    return this._isEmpty
+  }
+
+  set locked(isLocked: boolean) {
+    super.locked = isLocked
+    // this is invoked from super() which has no tiptap, hence the ?
+    this.tiptap?.setEditable(!isLocked)
+  }
+
+  get locked() {
+    return super.locked
+  }
+
+  readonly tiptap = new Tiptap({
+    extensions: TiptapExtensions,
+    onUpdate: () => {
+      this._content = this.tiptap.getJSON()
+      this._isEmpty = this.tiptap.isEmpty
+    },
+  })
+
+  constructor(
+    editor: Editor,
+    page: Page,
+    { 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
+  }
+
+  blockMove(event: React.PointerEvent): boolean {
+    const rect = this.tiptap.view.dom.getBoundingClientRect()
+    return (
+      super.blockMove(event) ||
+      (this.tiptap.isFocused &&
+        event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top &&
+        event.clientY <= rect.bottom)
+    )
+  }
+
+  props(): EditableNodeProps {
+    const { content, lineHeight } = this
+    return { ...super.props(), content, lineHeight }
+  }
+
+  serialize(): SerializedNode<string, EditableNodeProps> {
+    return super.serialize()
+  }
+}

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

@@ -0,0 +1,61 @@
+import { Extension } from "@tiptap/core"
+import { type Mark } from "@tiptap/pm/model"
+
+type Options = Record<never, never>
+
+type Storage = {
+  marks: Mark[] | null
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    letterSpacing: {
+      setLetterSpacing: (lineHeight: string) => ReturnType
+    }
+  }
+}
+
+export const LetterSpacing = Extension.create<Options, Storage>({
+  name: "letterSpacing",
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["textStyle"],
+        attributes: {
+          letterSpacing: {
+            default: null,
+            parseHTML: (element) => element.style.letterSpacing,
+            renderHTML: (attributes) => {
+              if (!attributes.letterSpacing) {
+                return {}
+              }
+
+              return {
+                style: `letter-spacing: ${attributes.letterSpacing}`,
+              }
+            },
+          },
+        },
+      },
+    ]
+  },
+
+  addCommands() {
+    return {
+      setLetterSpacing:
+        (letterSpacing) =>
+        ({ chain }) => {
+          return chain().setMark("textStyle", { letterSpacing }).run()
+        },
+      unsetFontSize:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .setMark("textStyle", { letterSpacing: null })
+            .removeEmptyTextStyle()
+            .run()
+        },
+    }
+  },
+})

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

@@ -0,0 +1,45 @@
+import { Extension } from "@tiptap/core"
+import { type Mark } from "@tiptap/pm/model"
+import { AllSelection } from "@tiptap/pm/state"
+
+type Options = Record<never, never>
+
+type Storage = {
+  marks: Mark[] | null
+}
+
+export const PersistentMarks = Extension.create<Options, Storage>({
+  name: "persistentMarks",
+
+  addStorage() {
+    return {
+      marks: null,
+    }
+  },
+
+  dispatchTransaction({ transaction, next }) {
+    // when ctrl+a selects everything capture marks on the first text
+    if (transaction.selection instanceof AllSelection) {
+      // doc > paragraph* > text*
+      const paragraph = transaction.doc.content.firstChild
+      const firstText = paragraph?.content.firstChild
+
+      this.storage.marks = firstText?.marks.values().toArray() ?? []
+      return next(transaction)
+    }
+
+    next(transaction)
+
+    // if the previous transaction was ctrl+a and this transaction
+    // emptied the doc, restore marks
+    if (this.storage.marks && this.editor.state.doc.textContent === "") {
+      const tr = this.storage.marks.reduce(
+        (tr, mark) => tr.addStoredMark(mark),
+        this.editor.state.tr,
+      )
+
+      this.editor.view.updateState(this.editor.state.apply(tr))
+      this.storage.marks = null
+    }
+  },
+})

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

@@ -0,0 +1,33 @@
+import Bold from "@tiptap/extension-bold"
+import Document from "@tiptap/extension-document"
+import HardBreak from "@tiptap/extension-hard-break"
+import Italic from "@tiptap/extension-italic"
+import Paragraph from "@tiptap/extension-paragraph"
+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 { TextStyleKit } from "@tiptap/extension-text-style"
+import Underline from "@tiptap/extension-underline"
+import { LetterSpacing } from "./letterSpacing"
+import { PersistentMarks } from "./persistentMarks"
+
+export const TiptapExtensions = [
+  Document,
+  Paragraph,
+  Text,
+  HardBreak,
+  Bold,
+  Italic,
+  Strike,
+  Underline,
+  Subscript,
+  Superscript,
+  LetterSpacing,
+  TextStyleKit.configure({
+    lineHeight: {
+      types: ["paragraph"],
+    },
+  }),
+  PersistentMarks,
+]

package/lib/model/node/formattable.ts

@@ -0,0 +1,108 @@
+import { state } from "react-bolt"
+import type { Editor } from "../editor"
+import { Node, type NodeProps, type SerializedNode } from "../node"
+import type { Page } from "../page"
+
+export type FormattableNodeProps = NodeProps &
+  Partial<
+    Pick<
+      FormattableNode,
+      | "bold"
+      | "italic"
+      | "underline"
+      | "strike"
+      | "superscript"
+      | "subscript"
+      | "color"
+      | "size"
+      | "family"
+      | "spacing"
+      | "lineHeight"
+      | "casing"
+    >
+  >
+
+export abstract class FormattableNode extends Node {
+  @state accessor bold: boolean
+  @state accessor italic: boolean
+  @state accessor underline: boolean
+  @state accessor strike: boolean
+  @state accessor superscript: boolean
+  @state accessor subscript: boolean
+  @state accessor color: string | null
+  @state accessor size: number
+  @state accessor family: string | null
+  @state accessor spacing: number
+  @state accessor lineHeight: number
+  @state accessor casing: "capitalize" | "uppercase" | "lowercase" | "normal"
+
+  constructor(
+    editor: Editor,
+    page: Page,
+    {
+      bold,
+      italic,
+      underline,
+      strike,
+      superscript,
+      subscript,
+      color,
+      size,
+      family,
+      spacing,
+      lineHeight,
+      casing,
+      ...props
+    }: FormattableNodeProps,
+  ) {
+    super(editor, page, props)
+    this.bold = bold ?? false
+    this.italic = italic ?? false
+    this.underline = underline ?? false
+    this.strike = strike ?? false
+    this.superscript = superscript ?? false
+    this.subscript = subscript ?? false
+    this.color = color ?? null
+    this.size = size ?? 16
+    this.family = family ?? null
+    this.spacing = spacing ?? 0
+    this.lineHeight = lineHeight ?? 1.2
+    this.casing = casing ?? "normal"
+  }
+
+  props(): FormattableNodeProps {
+    const {
+      bold,
+      italic,
+      underline,
+      strike,
+      superscript,
+      subscript,
+      color,
+      size,
+      family,
+      spacing,
+      lineHeight,
+      casing,
+    } = this
+    return {
+      ...super.props(),
+      size,
+      spacing,
+      lineHeight,
+      casing,
+      ...(bold && { bold }),
+      ...(italic && { italic }),
+      ...(underline && { underline }),
+      ...(strike && { strike }),
+      ...(superscript && { superscript }),
+      ...(subscript && { subscript }),
+      ...(color && { color }),
+      ...(family && { family }),
+    }
+  }
+
+  serialize(): SerializedNode<string, FormattableNodeProps> {
+    return super.serialize()
+  }
+}

package/lib/model/node/group.ts

@@ -0,0 +1,79 @@
+import { state } from "react-bolt"
+import type { Editor } from "../editor"
+import { Node, type NodeProps, type SerializedNode } from "../node"
+import type { Page } from "../page"
+
+export interface GroupNodeProps extends NodeProps {
+  nodes?: SerializedNode[]
+}
+
+export class GroupNode extends Node {
+  get name() {
+    return "group"
+  }
+
+  @state accessor nodes = new Set<Node>()
+
+  constructor(editor: Editor, page: Page, { nodes = [], ...props }: GroupNodeProps) {
+    super(editor, page, props)
+    this.nodes = new Set(nodes.map((node) => editor.deserializeNode(page, node)))
+  }
+
+  get width() {
+    return super.width
+  }
+
+  get height() {
+    return super.height
+  }
+
+  set width(n: number) {
+    const nodes = this.nodes
+      .values()
+      .map((node) => ({
+        node,
+        x: node.x / this.width,
+        w: node.width / this.width,
+      }))
+      .toArray()
+
+    super.width = n
+
+    for (const { node, x, w } of nodes) {
+      node.x = x * this.width
+      node.width = w * this.width
+    }
+  }
+
+  set height(n: number) {
+    const nodes = this.nodes
+      .values()
+      .map((node) => ({
+        node,
+        y: node.y / this.height,
+        h: node.height / this.height,
+      }))
+      .toArray()
+
+    super.height = n
+
+    for (const { node, y, h } of nodes) {
+      node.y = y * this.height
+      node.height = h * this.height
+    }
+  }
+
+  props(): GroupNodeProps {
+    return {
+      ...super.props(),
+      nodes: this.nodes
+        .values()
+        .map((node) => node.serialize())
+        .toArray(),
+    }
+  }
+
+  serialize(): SerializedNode<this["name"], GroupNodeProps> {
+    return super.serialize()
+  }
+}

package/lib/model/node/image.ts

@@ -0,0 +1,41 @@
+import { state } from "react-bolt"
+import type { Editor } from "../editor"
+import { Node, type NodeProps, type SerializedNode } from "../node"
+import type { Page } from "../page"
+
+export type ImageNodeProps = NodeProps &
+  Partial<Pick<ImageNode, "url" | "fit" | "roundness" | "borderWidth" | "borderColor">>
+
+export class ImageNode extends Node {
+  get name() {
+    return "image"
+  }
+
+  @state accessor url: string | null
+  @state accessor fit: "cover" | "contain" | "fill"
+  @state accessor roundness: number
+  @state accessor borderWidth: number
+  @state accessor borderColor: string
+
+  constructor(
+    editor: Editor,
+    page: Page,
+    { url, fit, roundness, borderWidth, borderColor, ...props }: ImageNodeProps,
+  ) {
+    super(editor, page, props)
+    this.url = url ?? null
+    this.fit = "cover"
+    this.roundness = roundness ?? 0
+    this.borderColor = borderColor ?? "#000000"
+    this.borderWidth = borderWidth ?? 0
+  }
+
+  props(): ImageNodeProps {
+    const { url, fit, roundness, borderWidth, borderColor } = this
+    return { ...super.props(), url, fit, roundness, borderWidth, borderColor }
+  }
+
+  serialize(): SerializedNode<this["name"], ImageNodeProps> {
+    return super.serialize()
+  }
+}

package/lib/model/node/shape/polygon.ts

@@ -0,0 +1,173 @@
+import { computed, state } from "react-bolt"
+import type { Editor } from "../../editor"
+import { add, clamp, dist, dot, mul, norm, sub, tidyFloat } from "../../geometry"
+import type { SerializedNode } from "../../node"
+import type { Page } from "../../page"
+import { ShapeNode, type ShapeNodeProps } from "./shape"
+
+export type PolygonNodeProps = ShapeNodeProps &
+  Partial<
+    Pick<
+      PolygonNode,
+      | "roundness"
+      | "sides"
+      | "cornerTopLeft"
+      | "cornerTopRight"
+      | "cornerBottomLeft"
+      | "cornerBottomRight"
+    >
+  >
+
+export class PolygonNode extends ShapeNode {
+  get name() {
+    return "polygon"
+  }
+
+  @state private accessor _roundness: number
+  @state accessor sides: number
+
+  // rectangles are special cased where they support by corner rounding
+  @state accessor cornerTopLeft: number
+  @state accessor cornerTopRight: number
+  @state accessor cornerBottomLeft: number
+  @state accessor cornerBottomRight: number
+
+  set roundness(r: number) {
+    if (this.sides === 4) {
+      this.cornerTopLeft = r
+      this.cornerTopRight = r
+      this.cornerBottomLeft = r
+      this.cornerBottomRight = r
+    }
+
+    this._roundness = r
+  }
+
+  @computed get roundness() {
+    if (this.sides === 4) {
+      const [first, ...radii] = [
+        this.cornerTopLeft,
+        this.cornerTopRight,
+        this.cornerBottomLeft,
+        this.cornerBottomRight,
+      ]
+
+      return radii.reduce((acc, it) => (it === acc ? acc : 0), first)
+    }
+
+    return this._roundness
+  }
+
+  constructor(
+    editor: Editor,
+    page: Page,
+    {
+      sides,
+      cornerTopLeft,
+      cornerTopRight,
+      cornerBottomLeft,
+      cornerBottomRight,
+      roundness = 0,
+      ...props
+    }: PolygonNodeProps,
+  ) {
+    super(editor, page, props)
+    this._roundness = roundness
+    this.sides = sides ?? 4
+    this.cornerTopLeft = cornerTopLeft ?? roundness
+    this.cornerTopRight = cornerTopRight ?? roundness
+    this.cornerBottomLeft = cornerBottomLeft ?? roundness
+    this.cornerBottomRight = cornerBottomRight ?? roundness
+  }
+
+  props(): PolygonNodeProps {
+    return {
+      ...super.props(),
+      sides: this.sides,
+      cornerTopLeft: this.cornerTopLeft,
+      cornerTopRight: this.cornerTopRight,
+      cornerBottomLeft: this.cornerBottomLeft,
+      cornerBottomRight: this.cornerBottomRight,
+    }
+  }
+
+  serialize(): SerializedNode<this["name"], PolygonNodeProps> {
+    return super.serialize()
+  }
+
+  @computed get svgPathData() {
+    return pathData({
+      width: this.width,
+      height: this.height,
+      sides: this.sides,
+      roundness: this._roundness,
+    })
+  }
+}
+
+function pathData(props: {
+  width: number
+  height: number
+  sides: number
+  roundness: number
+}): string {
+  const { width, height, sides, roundness } = props
+  const rotation = sides % 2 === 0 ? Math.PI / sides : 0
+  const cx = width / 2
+  const cy = height / 2
+  const rx = width / 2
+  const ry = height / 2
+
+  // vertices (raw)
+  const p = Array.from({ length: sides }, (_, i) => {
+    const angle = (i * Math.PI * 2) / sides - Math.PI / 2 + rotation
+    return {
+      x: cx + rx * Math.cos(angle),
+      y: cy + ry * Math.sin(angle),
+    }
+  })
+
+  const cmds = Array.from({ length: sides }, (_, i) => {
+    const prev = p[(i - 1 + sides) % sides]
+    const curr = p[i]
+    const next = p[(i + 1) % sides]
+    const cmd = i === 0 ? "M" : "L"
+
+    const v1 = norm(sub(prev, curr)) // direction from curr towards prev
+    const v2 = norm(sub(next, curr)) // direction from curr towards next
+
+    // interior angle between the two edges at curr
+    const cosTheta = clamp(dot(v1, v2), -1, 1)
+    const theta = Math.acos(cosTheta)
+
+    // degenerate / nearly straight: just treat as sharp
+    if (!isFinite(theta) || theta < 1e-6) {
+      const x = tidyFloat(curr.x)
+      const y = tidyFloat(curr.y)
+      return `${cmd} ${x} ${y}`
+    }
+
+    const dPrev = dist(curr, prev)
+    const dNext = dist(curr, next)
+
+    // how far to inset along each adjacent edge for radius r
+    const tIdeal = roundness / Math.tan(theta / 2)
+
+    // cannot exceed half of either edge
+    const t = Math.min(tIdeal, dPrev / 2, dNext / 2)
+
+    // if we had to clamp t, reduce radius so the arc still matches geometry
+    const rEff = t * Math.tan(theta / 2)
+
+    const p1 = add(curr, mul(v1, t)) // point on edge towards prev
+    const p2 = add(curr, mul(v2, t)) // point on edge towards next
+
+    // Arc to p2 with radius rEff.
+    // Use the small arc (0) and let SVG choose sweep; for convex polygons this is fine.
+    const arc = `A ${tidyFloat(rEff)} ${tidyFloat(rEff)} 0 0 1 ${tidyFloat(p2.x)} ${tidyFloat(p2.y)}`
+
+    return `${cmd} ${tidyFloat(p1.x)} ${tidyFloat(p1.y)} ${arc}`
+  })
+
+  return cmds.concat("Z").join(" ")
+}

package/lib/model/node/shape/shape.ts

@@ -0,0 +1,48 @@
+import { state } from "react-bolt"
+import type { Editor } from "../../editor"
+import type { Page } from "../../page"
+import { EditableNode, type EditableNodeProps } from "../editable"
+import type { SerializedNode } from "../../node"
+
+export type ShapeNodeProps = EditableNodeProps &
+  Partial<
+    Pick<ShapeNode, "valign" | "halign" | "background" | "borderWidth" | "borderColor">
+  >
+
+export abstract class ShapeNode extends EditableNode {
+  @state accessor background: string
+  @state accessor borderWidth: number
+  @state accessor borderColor: string
+
+  @state accessor halign: "left" | "center" | "right" | "justify"
+  @state accessor valign: "top" | "center" | "bottom"
+
+  constructor(
+    editor: Editor,
+    page: Page,
+    { valign, halign, background, borderColor, borderWidth, ...props }: ShapeNodeProps,
+  ) {
+    super(editor, page, props)
+    this.valign = valign ?? "center"
+    this.halign = halign ?? "center"
+    this.background = background ?? "#7f7f7f"
+    this.borderColor = borderColor ?? "#000000"
+    this.borderWidth = borderWidth ?? 0
+  }
+
+  props(): ShapeNodeProps {
+    const { valign, halign, background, borderColor, borderWidth } = this
+    return {
+      ...super.props(),
+      valign,
+      halign,
+      background,
+      ...(borderWidth && { borderColor }),
+      ...(borderWidth && { borderWidth }),
+    }
+  }
+
+  serialize(): SerializedNode<this["name"], EditableNodeProps> {
+    return super.serialize()
+  }
+}