@puredesktop/platform-editor 1.0.0-beta.1 → 1.0.0-beta.2

package/src/toolbar/groups/HeadingGroup.tsx

@@ -1,153 +1,175 @@
-import {
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactElement,
-} from 'react'
-import { useCurrentEditor, useEditorState } from '@tiptap/react'
-import { styled } from 'styled-components'
-import { DownOutlined } from '@ant-design/icons'
-import { ToolBtn } from '../ToolBtn.js'
-import { CollapsePanel } from '../../CollapsePanel.js'
-
-interface HeadingOption {
-  label: string
-  level: 0 | 1 | 2 | 3
-  style?: CSSProperties
-}
-
-const OPTIONS: HeadingOption[] = [
-  { label: 'Normal text', level: 0, style: { fontSize: 13 } },
-  { label: 'Title', level: 1, style: { fontSize: 22, fontWeight: 500 } },
-  { label: 'Heading', level: 2, style: { fontSize: 18, fontWeight: 500 } },
-  { label: 'Subheading', level: 3, style: { fontSize: 15, fontWeight: 500 } },
-]
-
-export function HeadingGroup(): ReactElement {
-  const { editor } = useCurrentEditor()
-  const isH1 = useEditorState({
-    editor,
-    selector: ctx => ctx.editor?.isActive('heading', { level: 1 }) ?? false,
-  })
-  const isH2 = useEditorState({
-    editor,
-    selector: ctx => ctx.editor?.isActive('heading', { level: 2 }) ?? false,
-  })
-  const isH3 = useEditorState({
-    editor,
-    selector: ctx => ctx.editor?.isActive('heading', { level: 3 }) ?? false,
-  })
-
-  const [open, setOpen] = useState(false)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-
-  const activeLevel = (isH1 && 1) || (isH2 && 2) || (isH3 && 3) || 0
-  const current = OPTIONS.find(o => o.level === activeLevel) ?? OPTIONS[0]
-
-  useEffect(() => {
-    if (!open) return
-    const onDown = (e: MouseEvent) => {
-      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', onDown)
-    return () => document.removeEventListener('mousedown', onDown)
-  }, [open])
-
-  const apply = (level: 0 | 1 | 2 | 3) => {
-    setOpen(false)
-    if (!editor) return
-    if (level === 0) editor.chain().focus().setParagraph().run()
-    else editor.chain().focus().toggleHeading({ level }).run()
-  }
-
-  return (
-    <Wrapper ref={wrapperRef}>
-      <Trigger
-        $active={activeLevel !== 0}
-        onClick={() => setOpen(o => !o)}
-        title="Text style"
-        type="button"
-      >
-        <span>{current.label}</span>
-        <DownOutlined />
-      </Trigger>
-
-      <Panel open={open}>
-        {OPTIONS.map(opt => (
-          <Option
-            key={opt.level}
-            $active={opt.level === activeLevel}
-            style={opt.style}
-            onClick={() => apply(opt.level)}
-            type="button"
-          >
-            {opt.label}
-          </Option>
-        ))}
-      </Panel>
-    </Wrapper>
-  )
-}
-
-const Wrapper = styled.div`
-  position: relative;
-`
-
-const Trigger = styled(ToolBtn)`
-  gap: 6px;
-  min-width: 128px;
-  padding: 0 8px 0 10px;
-
-  > span:first-child {
-    flex: 1;
-    text-align: left;
-  }
-
-  .anticon {
-    font-size: 10px;
-    opacity: 0.6;
-  }
-`
-
-const Panel = styled(CollapsePanel)`
-  background: var(--platform-colors-surface);
-  border: 1px solid var(--platform-colors-border);
-  border-radius: 6px;
-  box-shadow: 0 6px 18px rgb(from var(--platform-colors-text) r g b / 12%);
-  left: 0;
-  min-width: 180px;
-  padding: 0;
-  position: absolute;
-  top: calc(100% + 4px);
-  z-index: 20;
-
-  &[data-open='false'] {
-    border: none;
-    box-shadow: none;
-    pointer-events: none;
-  }
-`
-
-const Option = styled.button<{ $active?: boolean }>`
-  align-items: center;
-  background: ${({ $active }) =>
-    $active
-      ? 'rgb(from var(--platform-colors-accent) r g b / 12%)'
-      : 'transparent'};
-  border: none;
-  border-radius: 4px;
-  color: ${({ $active }) =>
-    $active ? 'var(--platform-colors-accent)' : 'var(--platform-colors-text)'};
-  cursor: pointer;
-  display: flex;
-  font-family: var(--platform-typography-font-family);
-  padding: 6px 10px;
-  text-align: left;
-  transition: background 0.12s ease;
-  width: 100%;
-
-  &:hover {
-    background: rgb(from var(--platform-colors-text) r g b / 8%);
-  }
-`
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+} from 'react'
+import { useCurrentEditor, useEditorState } from '@tiptap/react'
+import { styled } from 'styled-components'
+import { DownOutlined } from '@ant-design/icons'
+import { ToolBtn } from '../ToolBtn.js'
+import { CollapsePanel } from '../../CollapsePanel.js'
+
+interface HeadingOption {
+  label: string
+  level: 0 | 1 | 2 | 3
+  style?: CSSProperties
+}
+
+const OPTIONS: HeadingOption[] = [
+  { label: 'Normal text', level: 0, style: { fontSize: 13 } },
+  { label: 'Title', level: 1, style: { fontSize: 22, fontWeight: 500 } },
+  { label: 'Heading', level: 2, style: { fontSize: 18, fontWeight: 500 } },
+  { label: 'Subheading', level: 3, style: { fontSize: 15, fontWeight: 500 } },
+]
+
+export function HeadingGroup(): ReactElement {
+  const { editor } = useCurrentEditor()
+  const isH1 = useEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive('heading', { level: 1 }) ?? false,
+  })
+  const isH2 = useEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive('heading', { level: 2 }) ?? false,
+  })
+  const isH3 = useEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive('heading', { level: 3 }) ?? false,
+  })
+
+  const [open, setOpen] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  const activeLevel = (isH1 && 1) || (isH2 && 2) || (isH3 && 3) || 0
+  const current = OPTIONS.find(o => o.level === activeLevel) ?? OPTIONS[0]
+
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    return () => document.removeEventListener('mousedown', onDown)
+  }, [open])
+
+  const apply = (level: 0 | 1 | 2 | 3) => {
+    setOpen(false)
+    if (!editor) return
+    if (level === 0) editor.chain().focus().setParagraph().run()
+    else editor.chain().focus().toggleHeading({ level }).run()
+  }
+
+  return (
+    <Wrapper ref={wrapperRef}>
+      <Trigger
+        $active={activeLevel !== 0}
+        onClick={() => setOpen(o => !o)}
+        title="Text style"
+        type="button"
+      >
+        <span>{current.label}</span>
+        <DownOutlined />
+      </Trigger>
+
+      <Panel open={open}>
+        {OPTIONS.map(opt => (
+          <Option
+            key={opt.level}
+            $active={opt.level === activeLevel}
+            style={opt.style}
+            onClick={() => apply(opt.level)}
+            type="button"
+          >
+            {opt.label}
+          </Option>
+        ))}
+      </Panel>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  position: relative;
+`
+
+const Trigger = styled(ToolBtn)`
+  gap: 6px;
+  min-width: 128px;
+  padding: 0 8px 0 10px;
+
+  > span:first-child {
+    flex: 1;
+    text-align: left;
+  }
+
+  .anticon {
+    font-size: 10px;
+    opacity: 0.6;
+  }
+`
+
+const Panel = styled(CollapsePanel)`
+  background: var(
+    --editor-toolbar-panel,
+    var(--editor-paper, var(--platform-colors-surface))
+  );
+  border: 1px solid
+    var(
+      --editor-toolbar-border,
+      var(--editor-paper-border, var(--platform-colors-border))
+    );
+  border-radius: 6px;
+  box-shadow: 0 6px 18px
+    rgb(
+      from var(
+          --editor-toolbar-text,
+          var(--editor-paper-text, var(--platform-colors-text))
+        )
+        r g b / 12%
+    );
+  left: 0;
+  min-width: 180px;
+  padding: 0;
+  position: absolute;
+  top: calc(100% + 4px);
+  z-index: 20;
+
+  &[data-open='false'] {
+    border: none;
+    box-shadow: none;
+    pointer-events: none;
+  }
+`
+
+const Option = styled.button<{ $active?: boolean }>`
+  align-items: center;
+  background: ${({ $active }) =>
+    $active
+      ? 'rgb(from var(--editor-toolbar-text, var(--editor-paper-text, var(--platform-colors-text))) r g b / 8%)'
+      : 'transparent'};
+  border: none;
+  border-radius: 4px;
+  color: var(
+    --editor-toolbar-text,
+    var(--editor-paper-text, var(--platform-colors-text))
+  );
+  cursor: pointer;
+  display: flex;
+  font-family: var(--platform-typography-font-family);
+  padding: 6px 10px;
+  text-align: left;
+  transition: background 0.12s ease;
+  width: 100%;
+
+  &:hover {
+    background: rgb(
+      from var(
+          --editor-toolbar-text,
+          var(--editor-paper-text, var(--platform-colors-text))
+        )
+        r g b / 10%
+    );
+  }
+`

package/src/toolbar/overlayTypes.ts

@@ -1,28 +1,28 @@
-import type { ComponentType } from 'react'
-import type { CommentType } from '../commentUtils.js'
-
-export interface EditorLinkPromptProps {
-  open: boolean
-  value: string
-  onChange: (value: string) => void
-  onConfirm: () => void
-  onCancel: () => void
-}
-
-export interface EditorCommentPromptProps {
-  open: boolean
-  value: string
-  commentType: CommentType
-  commentTypeOptions: Array<{ value: CommentType; label: string }>
-  onChange: (value: string) => void
-  onCommentTypeChange: (value: CommentType) => void
-  onConfirm: () => void
-  onCancel: () => void
-  confirmDisabled?: boolean
-}
-
-/** Host-provided dialogs for toolbar prompts (use platform-ui overlays in apps). */
-export interface EditorToolbarOverlays {
-  LinkPrompt: ComponentType<EditorLinkPromptProps>
-  CommentPrompt: ComponentType<EditorCommentPromptProps>
-}
+import type { ComponentType } from 'react'
+import type { CommentType } from '../commentUtils.js'
+
+export interface EditorLinkPromptProps {
+  open: boolean
+  value: string
+  onChange: (value: string) => void
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export interface EditorCommentPromptProps {
+  open: boolean
+  value: string
+  commentType: CommentType
+  commentTypeOptions: Array<{ value: CommentType; label: string }>
+  onChange: (value: string) => void
+  onCommentTypeChange: (value: CommentType) => void
+  onConfirm: () => void
+  onCancel: () => void
+  confirmDisabled?: boolean
+}
+
+/** Host-provided dialogs for toolbar prompts (use platform-ui overlays in apps). */
+export interface EditorToolbarOverlays {
+  LinkPrompt: ComponentType<EditorLinkPromptProps>
+  CommentPrompt: ComponentType<EditorCommentPromptProps>
+}

package/src/useEditorExtensions.ts

@@ -1,22 +1,22 @@
-import { useMemo } from 'react'
-import {
-  buildExtensions,
-  type BuildExtensionsOptions,
-  type EditorFeatures,
-} from './editorExtensions.js'
-import type { Extensions } from '@tiptap/react'
-
-export function useEditorExtensions(
-  opts: {
-    placeholder?: string
-    features?: EditorFeatures
-  } = {},
-): Extensions {
-  const { placeholder, features } = opts
-  return useMemo(
-    () => buildExtensions({ placeholder, features }),
-    [placeholder, features],
-  )
-}
-
-export type { BuildExtensionsOptions, EditorFeatures }
+import { useMemo } from 'react'
+import {
+  buildExtensions,
+  type BuildExtensionsOptions,
+  type EditorFeatures,
+} from './editorExtensions.js'
+import type { Extensions } from '@tiptap/react'
+
+export function useEditorExtensions(
+  opts: {
+    placeholder?: string
+    features?: EditorFeatures
+  } = {},
+): Extensions {
+  const { placeholder, features } = opts
+  return useMemo(
+    () => buildExtensions({ placeholder, features }),
+    [placeholder, features],
+  )
+}
+
+export type { BuildExtensionsOptions, EditorFeatures }