@rimelight/cms 0.0.1

package/src/client/components/editors/ParagraphEditor.tsx

@@ -0,0 +1,314 @@
+import { createSignal, onMount, Show, type Component } from "solid-js"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+import RLSModal from "@rimelight/ui/components/modal/RLSModal.tsx"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+
+export interface InlineNode {
+  type: "text" | "link"
+  text?: string
+  marks?: string[]
+  url?: string
+  children?: InlineNode[]
+  openInNewTab?: boolean
+}
+
+export interface ParagraphEditorProps {
+  props: Record<string, any>
+  onPropsChange: (newProps: Record<string, any>) => void
+}
+
+const renderNodesToHtml = (nodes: InlineNode[]): string => {
+  return nodes
+    .map((node) => {
+      if (node.type === "text") {
+        let text = node.text || ""
+        text = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+        if (node.marks) {
+          if (node.marks.includes("bold")) text = `<strong>${text}</strong>`
+          if (node.marks.includes("italic")) text = `<em>${text}</em>`
+          if (node.marks.includes("underline")) text = `<u>${text}</u>`
+          if (node.marks.includes("strikethrough")) text = `<s>${text}</s>`
+          if (node.marks.includes("code")) text = `<code>${text}</code>`
+        }
+        return text
+      } else if (node.type === "link") {
+        const target = node.openInNewTab ? ' target="_blank"' : ""
+        return `<a href="${node.url || "#"}"${target}>${renderNodesToHtml(node.children || [])}</a>`
+      }
+      return ""
+    })
+    .join("")
+}
+
+export const ParagraphEditor: Component<ParagraphEditorProps> = (componentProps) => {
+  let editableDiv: HTMLDivElement | null = null as HTMLDivElement | null
+  let containerDiv: HTMLDivElement | null = null as HTMLDivElement | null
+
+  const [toolbarVisible, setToolbarVisible] = createSignal(false)
+  const [linkModalOpen, setLinkModalOpen] = createSignal(false)
+  const [linkUrl, setLinkUrl] = createSignal("")
+
+  const parseDOM = (root: Node): InlineNode[] => {
+    const nodes: InlineNode[] = []
+    root.childNodes.forEach((child) => {
+      if (child.nodeType === Node.TEXT_NODE) {
+        if (child.textContent) {
+          nodes.push({ type: "text", text: child.textContent })
+        }
+      } else if (child instanceof HTMLElement) {
+        const el = child
+        const tagName = el.tagName.toLowerCase()
+
+        if (el instanceof HTMLAnchorElement) {
+          const a = el
+          nodes.push({
+            type: "link",
+            url: a.href,
+            children: parseDOM(el)
+          })
+        } else {
+          const childNodes = parseDOM(el)
+          let mark = ""
+          if (["strong", "b"].includes(tagName)) mark = "bold"
+          else if (["em", "i"].includes(tagName)) mark = "italic"
+          else if (["u"].includes(tagName)) mark = "underline"
+          else if (["s", "strike"].includes(tagName)) mark = "strikethrough"
+          else if (["code"].includes(tagName)) mark = "code"
+
+          if (mark) {
+            childNodes.forEach((n) => {
+              if (n.type === "text") {
+                n.marks = n.marks || []
+                if (!n.marks.includes(mark)) n.marks.push(mark)
+              }
+            })
+          }
+          nodes.push(...childNodes)
+        }
+      }
+    })
+    return nodes
+  }
+
+  const saveProps = () => {
+    if (!editableDiv) return
+    const parsedNodes = parseDOM(editableDiv)
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      text: parsedNodes
+    })
+  }
+
+  const execCommand = (cmd: string) => {
+    if (cmd === "createLink") {
+      // Open our modal instead of using browser prompt()
+      setLinkUrl("")
+      setLinkModalOpen(true)
+    } else {
+      // Use Selection API instead of deprecated execCommand
+      const selection = window.getSelection()
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+        const selectedText = range.toString()
+
+        if (selectedText) {
+          if (cmd === "bold") {
+            const strong = document.createElement("strong")
+            range.surroundContents(strong)
+          } else if (cmd === "italic") {
+            const em = document.createElement("em")
+            range.surroundContents(em)
+          } else if (cmd === "underline") {
+            const u = document.createElement("u")
+            range.surroundContents(u)
+          }
+          selection.removeAllRanges()
+        }
+      }
+      editableDiv?.focus()
+    }
+  }
+
+  const applyLink = () => {
+    const url = linkUrl().trim()
+    if (url) {
+      editableDiv?.focus()
+      // Use Selection API instead of deprecated execCommand
+      const selection = window.getSelection()
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+        const selectedText = range.toString()
+
+        if (selectedText) {
+          const a = document.createElement("a")
+          a.href = url
+          a.textContent = selectedText
+          range.deleteContents()
+          range.insertNode(a)
+          selection.removeAllRanges()
+        }
+      }
+      saveProps()
+    }
+    setLinkModalOpen(false)
+  }
+
+  onMount(() => {
+    if (!editableDiv) return
+    const text = componentProps.props.text
+    if (!text) {
+      editableDiv.innerHTML = ""
+    } else if (Array.isArray(text)) {
+      editableDiv.innerHTML = renderNodesToHtml(text)
+    } else if (typeof text === "object" && text.en) {
+      editableDiv.innerText = text.en
+    } else {
+      editableDiv.innerText = String(text)
+    }
+
+    editableDiv.addEventListener("input", () => {
+      saveProps()
+    })
+    editableDiv.addEventListener("focus", () => setToolbarVisible(true))
+    editableDiv.addEventListener("blur", () => {
+      setTimeout(() => {
+        if (containerDiv && !containerDiv.contains(document.activeElement)) {
+          setToolbarVisible(false)
+          saveProps()
+        }
+      }, 200)
+    })
+    editableDiv.addEventListener("keydown", (e: KeyboardEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        if (e.key === "b") {
+          e.preventDefault()
+          execCommand("bold")
+        } else if (e.key === "i") {
+          e.preventDefault()
+          execCommand("italic")
+        } else if (e.key === "u") {
+          e.preventDefault()
+          execCommand("underline")
+        } else if (e.key === "k") {
+          e.preventDefault()
+          execCommand("createLink")
+        }
+      }
+    })
+    editableDiv.addEventListener("paste", (e: ClipboardEvent) => {
+      e.preventDefault()
+      const clipboardText = e.clipboardData?.getData("text/plain") || ""
+      // Use Selection API instead of deprecated execCommand
+      const selection = window.getSelection()
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+        range.deleteContents()
+        const textNode = document.createTextNode(clipboardText)
+        range.insertNode(textNode)
+        selection.removeAllRanges()
+      }
+      saveProps()
+    })
+  })
+
+  return (
+    <div
+      ref={(el) => (containerDiv = el)}
+      class="rimelight-paragraph-editor flex flex-col w-full relative"
+    >
+      <div
+        class="toolbar-div flex items-center gap-0.5 px-1.5 py-1 bg-elevated border border-default rounded-lg shadow-sm mb-1 self-start"
+        classList={{ hidden: !toolbarVisible() }}
+      >
+        <RLSButton
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          square={true}
+          onClick={() => execCommand("bold")}
+          class="font-bold !px-2"
+          label="B"
+        />
+        <RLSButton
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          square={true}
+          onClick={() => execCommand("italic")}
+          class="italic font-serif !px-2"
+          label="I"
+        />
+        <RLSButton
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          square={true}
+          onClick={() => execCommand("underline")}
+          class="underline !px-2"
+          label="U"
+        />
+        <div class="w-px h-3.5 bg-default mx-1" />
+        <RLSButton
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          onClick={() => execCommand("createLink")}
+          leadingIcon="link"
+          label="Link"
+        />
+      </div>
+      <div
+        ref={(el) => (editableDiv = el)}
+        aria-label="Paragraph text content"
+        contentEditable={true}
+        class="editable-div py-1.5 px-2 outline-none min-h-[2.5rem] text-sm text-foreground bg-transparent leading-relaxed focus:ring-1 focus:ring-primary/40 rounded-lg"
+      />
+
+      {/* Link URL Modal — replaces browser prompt() */}
+      <Show when={linkModalOpen()}>
+        <RLSModal
+          open={linkModalOpen()}
+          onClose={() => setLinkModalOpen(false)}
+          title="Insert Link"
+          footerSlot={
+            <>
+              <RLSButton
+                variant="outline"
+                color="neutral"
+                size="sm"
+                onClick={() => setLinkModalOpen(false)}
+                label="Cancel"
+              />
+              <RLSButton
+                variant="solid"
+                color="primary"
+                size="sm"
+                onClick={applyLink}
+                label="Insert"
+              />
+            </>
+          }
+        >
+          <div class="flex flex-col gap-2 py-2">
+            <span class="text-xs font-semibold text-muted-foreground">URL</span>
+            <RLSInput
+              value={linkUrl()}
+              onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
+                setLinkUrl(e.currentTarget.value)
+              }
+              onKeyDown={(e: KeyboardEvent) => {
+                if (e.key === "Enter") {
+                  e.preventDefault()
+                  applyLink()
+                }
+              }}
+              placeholder="https://..."
+              leadingIcon="link"
+              autofocus
+            />
+          </div>
+        </RLSModal>
+      </Show>
+    </div>
+  )
+}

package/src/client/components/editors/SceneEditor.tsx

@@ -0,0 +1,245 @@
+import { createSignal, onMount, onCleanup, For, Show, type Component } from "solid-js"
+import type { BaseBlock } from "../../../core/types/blocks"
+import { initBlockSortable, cleanAllSortableClasses } from "../../utils/sortable"
+import { createDefaultBlock } from "../../state/history"
+import RLSSelect from "@rimelight/ui/components/select/RLSSelect.tsx"
+import RLSInput from "@rimelight/ui/components/input/RLSInput.tsx"
+import RLSTextarea from "@rimelight/ui/components/textarea/RLSTextarea.tsx"
+import RLSButton from "@rimelight/ui/components/button/RLSButton.tsx"
+
+export interface SceneEditorProps {
+  blockId?: string
+  props: Record<string, any>
+  children?: BaseBlock[] | (() => BaseBlock[])
+  sectionDepth?: number
+  onPropsChange: (newProps: Record<string, any>) => void
+  onRelocate?: ((id: string, newIndex: number, targetParentId?: string | null) => void) | undefined
+  onOpenPicker?: () => void
+  renderChildBlock?: (block: BaseBlock, depth: number) => any
+}
+
+const SETTINGS = ["INT.", "EXT.", "INT./EXT.", "OTHER"]
+const TIMES_OF_DAY = [
+  "MORNING",
+  "DAY",
+  "AFTERNOON",
+  "EVENING",
+  "NIGHT",
+  "CONTINUOUS",
+  "LATER",
+  "OTHER"
+]
+const TRANSITIONS = ["NONE", "CUT_TO", "FADE_TO", "DISSOLVE_TO"]
+
+export const SceneEditor: Component<SceneEditorProps> = (componentProps) => {
+  let childrenCanvas: HTMLDivElement | undefined
+  let sortableInstance: any = null
+
+  const [addMenuOpen, setAddMenuOpen] = createSignal(false)
+
+  const childrenBlocks = (): BaseBlock[] => {
+    if (typeof componentProps.children === "function") {
+      return componentProps.children() || []
+    }
+    return componentProps.children || componentProps.props.children || []
+  }
+
+  const slugText = () => {
+    const setting = componentProps.props.setting || "INT."
+    const loc = (componentProps.props.location || "LOCATION").toUpperCase()
+    const time = componentProps.props.timeOfDay || "MORNING"
+    return `${setting} ${loc} - ${time}`
+  }
+
+  const saveProps = (partial: Record<string, any>) => {
+    componentProps.onPropsChange({
+      ...componentProps.props,
+      ...partial,
+      children: childrenBlocks()
+    })
+  }
+
+  onMount(() => {
+    if (childrenCanvas) {
+      sortableInstance = initBlockSortable(childrenCanvas, {
+        filter: ".cms-empty-placeholder, .locked",
+        onReorder: (oldIdx: number, newIdx: number) => {
+          cleanAllSortableClasses()
+          const list = [...childrenBlocks()]
+          const item = list.splice(oldIdx, 1)[0]
+          if (item) {
+            list.splice(newIdx, 0, item)
+            componentProps.onPropsChange({ ...componentProps.props, children: list })
+          }
+          requestAnimationFrame(() => cleanAllSortableClasses())
+          setTimeout(cleanAllSortableClasses, 50)
+          setTimeout(cleanAllSortableClasses, 200)
+        },
+        onAdd: (blockId: string, newIdx: number) => {
+          cleanAllSortableClasses()
+          if (componentProps.onRelocate && componentProps.blockId) {
+            componentProps.onRelocate(blockId, newIdx, componentProps.blockId)
+          }
+          requestAnimationFrame(() => cleanAllSortableClasses())
+          setTimeout(cleanAllSortableClasses, 50)
+          setTimeout(cleanAllSortableClasses, 200)
+        },
+        onRemove: (_blockId: string, _oldIdx: number) => {
+          cleanAllSortableClasses()
+        }
+      })
+    }
+
+    onCleanup(() => {
+      if (sortableInstance) sortableInstance.destroy()
+    })
+  })
+
+  const addChildBlock = (type: string) => {
+    const newBlock = createDefaultBlock(type)
+    const list = [...childrenBlocks(), newBlock]
+    componentProps.onPropsChange({ ...componentProps.props, children: list })
+    setAddMenuOpen(false)
+  }
+
+  return (
+    <div class="rimelight-scene-editor flex flex-col gap-3 p-3 border-l-2 border-primary/50 w-full">
+      <div class="slug-preview text-xs font-mono text-primary uppercase px-2 py-1 rounded border border-default/50 self-start">
+        {slugText()}
+      </div>
+
+      <div class="grid grid-cols-2 gap-3">
+        <div class="col-span-2 flex flex-col gap-1">
+          <span class="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+            Location
+          </span>
+          <RLSInput
+            id="scene-location-input"
+            data-field="location"
+            value={componentProps.props.location || ""}
+            onBlur={(e) => saveProps({ location: e.currentTarget.value })}
+            placeholder="E.g. LIVING ROOM"
+            size="sm"
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+            Setting
+          </span>
+          <RLSSelect
+            items={SETTINGS}
+            value={componentProps.props.setting || "INT."}
+            onChange={(e) => saveProps({ setting: e.currentTarget.value })}
+            size="sm"
+          />
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <span class="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+            Time of Day
+          </span>
+          <RLSSelect
+            items={TIMES_OF_DAY}
+            value={componentProps.props.timeOfDay || "MORNING"}
+            onChange={(e) => saveProps({ timeOfDay: e.currentTarget.value })}
+            size="sm"
+          />
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <span class="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+          Action / Description
+        </span>
+        <RLSTextarea
+          id="scene-description-textarea"
+          data-field="description"
+          value={componentProps.props.description || ""}
+          onBlur={(e) => saveProps({ description: e.currentTarget.value })}
+          placeholder="Action lines..."
+          rows={3}
+        />
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <span class="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+          Transition (End of Scene)
+        </span>
+        <div class="w-48">
+          <RLSSelect
+            items={TRANSITIONS}
+            value={componentProps.props.transition || "NONE"}
+            onChange={(e) => saveProps({ transition: e.currentTarget.value })}
+            size="sm"
+          />
+        </div>
+      </div>
+
+      <div
+        ref={(el) => (childrenCanvas = el)}
+        class="children-canvas mt-2 pl-3 border-l-2 border-default flex flex-col gap-2 min-h-[60px]"
+        data-container-type="scene"
+      >
+        {childrenBlocks().length === 0 ? (
+          <div class="cms-empty-placeholder relative flex flex-col items-center justify-center gap-2 p-3 rounded-lg border border-dashed border-default text-center my-1">
+            <div class="text-xs font-semibold text-muted-foreground">Empty scene</div>
+            <RLSButton
+              variant="outline"
+              color="neutral"
+              size="xs"
+              onClick={() => setAddMenuOpen(true)}
+              leadingIcon="plus"
+              label="Add Content"
+            />
+          </div>
+        ) : (
+          <For each={childrenBlocks()}>
+            {(childBlock) =>
+              componentProps.renderChildBlock?.(childBlock, (componentProps.sectionDepth || 0) + 1)
+            }
+          </For>
+        )}
+      </div>
+
+      <Show when={addMenuOpen()}>
+        <div class="add-block-menu mt-2 p-2 rounded-lg border border-default flex items-center gap-2">
+          <RLSButton
+            variant="soft"
+            color="neutral"
+            size="xs"
+            onClick={() => addChildBlock("ParagraphBlock")}
+            label="Text"
+          />
+          <RLSButton
+            variant="soft"
+            color="primary"
+            size="xs"
+            onClick={() => addChildBlock("DialogueBlock")}
+            label="Dialogue"
+          />
+          <div class="ml-auto">
+            <RLSButton
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              onClick={() => setAddMenuOpen(false)}
+              label="Cancel"
+            />
+          </div>
+        </div>
+      </Show>
+
+      <div class="pt-1">
+        <RLSButton
+          variant="outline"
+          color="neutral"
+          size="xs"
+          onClick={() => setAddMenuOpen(true)}
+          leadingIcon="plus"
+          label="Add Content"
+        />
+      </div>
+    </div>
+  )
+}