@synerise/ds-rich-text 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2026-07-24)
+
+### Features
+
+- **rich-text:** add markdown serializers, code snippet and table support ([56acd09](https://github.com/Synerise/synerise-design/commit/56acd097e2106a8743e85f98226caedca87a33e3))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,173 @@
+---
+id: rich-text
+title: RichText
+---
+
+RichText UI Component — a WYSIWYG editor for the Synerise Design System, built on TipTap (ProseMirror).
+
+## Installation
+
+```
+npm i @synerise/ds-rich-text
+or
+yarn add @synerise/ds-rich-text
+```
+
+## Usage
+
+### HTML mode (default)
+
+```tsx
+import RichText from '@synerise/ds-rich-text';
+
+<RichText
+  label="Description"
+  placeholder="Start typing..."
+  value={html}
+  onChange={(html) => setHtml(html)}
+/>
+```
+
+### Document mode (Portable Block Model)
+
+```tsx
+import RichText from '@synerise/ds-rich-text';
+import type { RichTextDocument } from '@synerise/ds-rich-text';
+
+const [doc, setDoc] = useState<RichTextDocument>();
+
+<RichText
+  format="document"
+  label="Article body"
+  value={doc}
+  onChange={(doc) => setDoc(doc)}
+/>
+```
+
+### With image upload
+
+```tsx
+<RichText
+  value={content}
+  onChange={setContent}
+  onImageUpload={async (file) => {
+    const formData = new FormData();
+    formData.append('file', file);
+    const res = await fetch('/api/media/upload', { method: 'POST', body: formData });
+    const { url } = await res.json();
+    return url;
+  }}
+/>
+```
+
+### Limited toolbar
+
+```tsx
+<RichText
+  toolbarFeatures={['bold', 'italic', 'link']}
+  value={content}
+  onChange={setContent}
+/>
+```
+
+## API
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| format | Output format — `'html'` emits string, `'document'` emits `RichTextDocument` | `'html' \| 'document'` | `'html'` |
+| value | Controlled value (accepts both HTML string and `RichTextDocument`) | `string \| RichTextDocument` | - |
+| defaultValue | Initial value for uncontrolled mode | `string \| RichTextDocument` | - |
+| onChange | Called when content changes | `(value: string \| RichTextDocument) => void` | - |
+| onEditorReady | Called with the TipTap Editor instance after mount | `(editor: Editor) => void` | - |
+| placeholder | Placeholder text when editor is empty | `string` | - |
+| readOnly | Makes the editor non-editable | `boolean` | `false` |
+| disabled | Disables the editor (greyed out) | `boolean` | `false` |
+| label | Label above the editor | `ReactNode` | - |
+| tooltip | Tooltip content next to label | `ReactNode` | - |
+| tooltipConfig | Full tooltip configuration | `TooltipProps` | - |
+| description | Description text below editor | `ReactNode` | - |
+| errorText | Error message below editor (triggers error styling) | `ReactNode` | - |
+| height | Height of the editor area | `string \| number` | - |
+| maxHeight | Max height before scrolling | `string \| number` | - |
+| toolbarFeatures | Which toolbar buttons to show | `ToolbarFeature[]` | all features |
+| hideToolbar | Hide the toolbar entirely | `boolean` | `false` |
+| headingLevels | Available heading levels | `(1 \| 2 \| 3 \| 4 \| 5 \| 6)[]` | `[1, 2, 3]` |
+| texts | Override i18n strings | `Partial<RichTextTexts>` | - |
+| noBorder | Remove the border | `boolean` | `false` |
+| autoFocus | Auto-focus the editor on mount | `boolean` | `false` |
+| onImageUpload | Custom image upload handler; receives File, returns URL | `(file: File) => string \| Promise<string>` | - |
+| style | Inline styles on wrapper | `CSSProperties` | - |
+| className | Class name on wrapper | `string` | - |
+
+### ToolbarFeature
+
+```ts
+'bold' | 'italic' | 'underline' | 'strikethrough' | 'heading' |
+'bulletList' | 'orderedList' | 'link' | 'textAlign' | 'codeBlock' | 'image'
+```
+
+### RichTextTexts
+
+Customisable user-facing labels:
+
+| Property | Description | Default |
+| --- | --- | --- |
+| bold | Bold button tooltip | `'Bold'` |
+| italic | Italic button tooltip | `'Italic'` |
+| underline | Underline button tooltip | `'Underline'` |
+| strikethrough | Strikethrough button tooltip | `'Strikethrough'` |
+| heading | Heading button tooltip prefix | `'Heading'` |
+| bulletList | Bullet list button tooltip | `'Bullet list'` |
+| orderedList | Ordered list button tooltip | `'Ordered list'` |
+| link | Link button tooltip | `'Link'` |
+| alignLeft | Align left button tooltip | `'Align left'` |
+| alignCenter | Align center button tooltip | `'Align center'` |
+| alignRight | Align right button tooltip | `'Align right'` |
+| codeBlock | Code block button tooltip | `'Code block'` |
+| image | Image button tooltip | `'Image'` |
+| linkPlaceholder | Link URL input placeholder | `'Enter URL...'` |
+| linkConfirm | Link confirm button label | `'Apply'` |
+| linkRemove | Link remove button label | `'Remove link'` |
+| imagePlaceholder | Image URL input placeholder | `'Enter image URL...'` |
+| imageConfirm | Image confirm button label | `'Insert'` |
+| imageUpload | Image upload button label | `'Upload file'` |
+
+## Block Model
+
+The component can output a structured `RichTextDocument` instead of HTML when `format="document"` is set. This is an editor-agnostic JSON format suitable for database storage and independent rendering.
+
+### Serializers
+
+```ts
+import {
+  htmlToDocument,       // HTML string → RichTextDocument
+  documentToHtml,       // RichTextDocument → HTML string
+  tiptapJsonToDocument, // ProseMirror JSON → RichTextDocument
+  documentToTiptapJson, // RichTextDocument → ProseMirror JSON
+} from '@synerise/ds-rich-text';
+```
+
+### RichTextDocument structure
+
+```json
+{
+  "type": "doc",
+  "version": 1,
+  "children": [
+    {
+      "type": "heading",
+      "attrs": { "level": 2 },
+      "children": [{ "type": "text", "text": "Title" }]
+    },
+    {
+      "type": "paragraph",
+      "children": [
+        { "type": "text", "text": "Text with " },
+        { "type": "text", "text": "bold", "marks": [{ "type": "bold" }] }
+      ]
+    }
+  ]
+}
+```
+
+

package/dist/RichText.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { RichTextProps } from './RichText.types';
+declare const RichText: React.ForwardRefExoticComponent<RichTextProps & React.RefAttributes<HTMLDivElement>>;
+export default RichText;

package/dist/RichText.js

@@ -0,0 +1,179 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { useTheme } from "@synerise/ds-core";
+import { FormFieldLabel } from "@synerise/ds-form-field";
+import Icon, { EditS } from "@synerise/ds-icon";
+import { useCombinedRefs, useOnClickOutside } from "@synerise/ds-utils";
+import { useEditor, EditorContent } from "@tiptap/react";
+import { RichTextWrapper, ContentAbove, EditorWrapper, ToolbarArea, EditorArea, SubtleSuffix, ContentBelow, ErrorText, Description } from "./RichText.styles.js";
+import { DEFAULT_TEXTS, ALL_TOOLBAR_FEATURES, DEFAULT_HEADING_LEVELS } from "./RichText.types.js";
+import { tiptapJsonToDocument } from "./blockModel/serializers/tiptapToDocument.js";
+import { documentToTiptapJson } from "./blockModel/serializers/documentToTiptap.js";
+import { documentToMarkdown } from "./blockModel/serializers/documentToMarkdown.js";
+import { markdownToDocument } from "./blockModel/serializers/markdownToDocument.js";
+import { Toolbar } from "./components/Toolbar.js";
+import "@synerise/ds-button";
+import "@synerise/ds-input";
+import { getExtensions } from "./utils/getExtensions.js";
+const SUBTLE_IGNORE_SELECTORS = ["[data-popover-content]"];
+const isDocument = (val) => typeof val === "object" && val !== null && val.type === "doc";
+const toEditorContent = (val, format) => {
+  if (val === void 0) {
+    return "";
+  }
+  if (typeof val === "string") {
+    return format === "markdown" ? documentToTiptapJson(markdownToDocument(val)) : val;
+  }
+  return documentToTiptapJson(val);
+};
+const RichText = forwardRef(({
+  format = "html",
+  value,
+  defaultValue,
+  onChange,
+  onEditorReady,
+  placeholder,
+  readOnly = false,
+  disabled = false,
+  label,
+  tooltip,
+  tooltipConfig,
+  description,
+  errorText,
+  height,
+  maxHeight,
+  toolbarFeatures = ALL_TOOLBAR_FEATURES,
+  hideToolbar = false,
+  subtle = false,
+  animations = false,
+  headingLevels = DEFAULT_HEADING_LEVELS,
+  texts: textsProp,
+  noBorder,
+  style,
+  className,
+  autoFocus = false,
+  onImageUpload,
+  onEditWithAI,
+  editWithAIOptions
+}, ref) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [subtleActive, setSubtleActive] = useState(false);
+  const [subtleBlurred, setSubtleBlurred] = useState(false);
+  const lastEmittedRef = useRef("");
+  const wrapperRef = useCombinedRefs(ref);
+  const theme = useTheme();
+  const hasError = !!errorText;
+  const isSubtle = subtle && !readOnly && !disabled;
+  const isSubtlePreview = isSubtle && !subtleActive && !hasError;
+  const isEditable = !readOnly && !disabled && !isSubtlePreview;
+  const texts = useMemo(() => ({
+    ...DEFAULT_TEXTS,
+    ...textsProp
+  }), [textsProp]);
+  const extensions = useMemo(() => getExtensions({
+    features: toolbarFeatures,
+    headingLevels,
+    placeholder,
+    copyText: texts.copySnippet,
+    copiedText: texts.copiedSnippet,
+    // Like SubtleForm fields, an empty subtle preview shows the placeholder.
+    alwaysShowPlaceholder: isSubtle
+  }), [toolbarFeatures, headingLevels, placeholder, texts, isSubtle]);
+  const handleUpdate = useCallback(({
+    editor: ed
+  }) => {
+    if (!onChange) {
+      return;
+    }
+    if (format === "document") {
+      lastEmittedRef.current = ed.getHTML();
+      onChange(tiptapJsonToDocument(ed.getJSON()));
+    } else if (format === "markdown") {
+      const md = documentToMarkdown(tiptapJsonToDocument(ed.getJSON()));
+      lastEmittedRef.current = md;
+      onChange(md);
+    } else {
+      const html = ed.getHTML();
+      lastEmittedRef.current = html;
+      onChange(html);
+    }
+  }, [format, onChange]);
+  const editor = useEditor({
+    extensions,
+    content: toEditorContent(value ?? defaultValue, format),
+    editable: isEditable,
+    autofocus: autoFocus,
+    onUpdate: handleUpdate,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false)
+  });
+  useEffect(() => {
+    if (editor && onEditorReady) {
+      onEditorReady(editor);
+    }
+  }, [editor, onEditorReady]);
+  useEffect(() => {
+    if (editor) {
+      editor.setEditable(isEditable);
+    }
+  }, [editor, isEditable]);
+  useEffect(() => {
+    if (isSubtle && subtleActive && editor && !editor.isDestroyed) {
+      editor.commands.focus("end");
+    }
+  }, [isSubtle, subtleActive, editor]);
+  const handleSubtleActivate = useCallback((event) => {
+    if (event.target.closest("a")) {
+      return;
+    }
+    setSubtleActive(true);
+    setSubtleBlurred(false);
+  }, []);
+  const handleSubtleDeactivate = useCallback(() => {
+    setSubtleActive(false);
+    setSubtleBlurred(true);
+  }, []);
+  useOnClickOutside(wrapperRef, isSubtle && subtleActive ? handleSubtleDeactivate : null, void 0, SUBTLE_IGNORE_SELECTORS);
+  useEffect(() => {
+    if (!editor || value === void 0) {
+      return;
+    }
+    if (isDocument(value)) {
+      const pmJson = documentToTiptapJson(value);
+      const currentJson = JSON.stringify(editor.getJSON());
+      const newJson = JSON.stringify(pmJson);
+      if (currentJson !== newJson) {
+        editor.commands.setContent(pmJson, false);
+      }
+    } else if (format === "markdown") {
+      if (lastEmittedRef.current !== value) {
+        editor.commands.setContent(documentToTiptapJson(markdownToDocument(value)), false);
+      }
+    } else {
+      const currentHTML = editor.getHTML();
+      if (currentHTML !== value && lastEmittedRef.current !== value) {
+        editor.commands.setContent(value, false);
+      }
+    }
+  }, [editor, value, format]);
+  const labelElement = useMemo(() => label && /* @__PURE__ */ jsx(FormFieldLabel, { label, tooltip, tooltipConfig: tooltip || tooltipConfig ? {
+    ...tooltipConfig,
+    title: tooltip
+  } : void 0 }), [label, tooltip, tooltipConfig]);
+  return /* @__PURE__ */ jsxs(RichTextWrapper, { ref: wrapperRef, $disabled: disabled, style, className, "data-testid": "rich-text-wrapper", children: [
+    labelElement && /* @__PURE__ */ jsx(ContentAbove, { "data-testid": "rich-text-label", children: labelElement }),
+    /* @__PURE__ */ jsxs(EditorWrapper, { $hasError: hasError, $noBorder: noBorder, $isFocused: isFocused, $subtlePreview: isSubtlePreview, $subtleBlurred: subtleBlurred, $animations: animations, onClick: isSubtlePreview ? handleSubtleActivate : void 0, "data-testid": "rich-text-editor-wrapper", children: [
+      !hideToolbar && !readOnly && !isSubtlePreview && /* @__PURE__ */ jsx(ToolbarArea, { children: /* @__PURE__ */ jsx(Toolbar, { editor, features: toolbarFeatures, headingLevels, texts, disabled, onImageUpload, onEditWithAI, editWithAIOptions }) }),
+      /* @__PURE__ */ jsx(EditorArea, { $height: height, $maxHeight: maxHeight, $readOnly: readOnly, $subtlePreview: isSubtlePreview, "data-testid": "rich-text-editor", children: /* @__PURE__ */ jsx(EditorContent, { editor }) }),
+      isSubtlePreview && /* @__PURE__ */ jsx(SubtleSuffix, { "data-testid": "rich-text-subtle-edit-icon", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditS, {}), color: theme.palette["grey-600"] }) })
+    ] }),
+    (errorText || description) && /* @__PURE__ */ jsxs(ContentBelow, { "data-testid": "rich-text-below", children: [
+      errorText && /* @__PURE__ */ jsx(ErrorText, { "data-testid": "rich-text-error", children: errorText }),
+      description && /* @__PURE__ */ jsx(Description, { "data-testid": "rich-text-description", children: description })
+    ] })
+  ] });
+});
+RichText.displayName = "RichText";
+export {
+  RichText as default
+};

package/dist/RichText.styles.d.ts

@@ -0,0 +1,31 @@
+import { ThemeProps } from '@synerise/ds-core';
+export declare const RichTextWrapper: import('styled-components').StyledComponent<"div", any, {
+    $disabled?: boolean;
+}, never>;
+export declare const SubtleSuffix: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const EditorWrapper: import('styled-components').StyledComponent<"div", any, {
+    $hasError?: boolean;
+    $noBorder?: boolean;
+    $isFocused?: boolean;
+    $subtlePreview?: boolean;
+    $subtleBlurred?: boolean;
+    $animations?: boolean;
+}, never>;
+export declare const ToolbarArea: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+export declare const ToolbarItems: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ToolbarEntry: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const EditorArea: import('styled-components').StyledComponent<"div", any, {
+    $height?: string | number;
+    $maxHeight?: string | number;
+    $readOnly?: boolean;
+    $subtlePreview?: boolean;
+}, never>;
+export declare const ContentAbove: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ContentBelow: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ErrorText: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+export declare const Description: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+export declare const AiGradientLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ToolbarSeparator: import('styled-components').StyledComponent<"div", any, ThemeProps, never>;
+export declare const BlockMenu: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const PopoverForm: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const PopoverActions: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/RichText.styles.js

@@ -0,0 +1,87 @@
+import styled, { css, keyframes } from "styled-components";
+import { hexToRgba } from "@synerise/ds-utils";
+const TOOLBAR_HEIGHT_PX = 44;
+const subtleBlurAnimation = /* @__PURE__ */ keyframes(["0%{padding-top:", "px;}100%{padding-top:12px;}"], 12 + TOOLBAR_HEIGHT_PX);
+const RichTextWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__RichTextWrapper",
+  componentId: "sc-8lgglv-0"
+})(["display:flex;flex-direction:column;", ";"], (props) => props.$disabled && css(["opacity:0.4;pointer-events:none;"]));
+const SubtleSuffix = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__SubtleSuffix",
+  componentId: "sc-8lgglv-1"
+})(["position:absolute;right:6px;top:6px;display:flex;opacity:0;height:24px;transition:opacity 0.1s ease-in;transition-delay:0.2s;pointer-events:none;"]);
+const EditorWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__EditorWrapper",
+  componentId: "sc-8lgglv-2"
+})(["position:relative;border:", ";border-radius:3px;display:flex;flex-direction:column;overflow:hidden;transition:border-color 0.2s ease,background 0.1s ease-in;", ";", ";", ";", ";"], (props) => props.$noBorder ? "none" : props.$subtlePreview ? "solid 1px transparent" : `solid 1px ${props.$hasError ? props.theme.palette["red-600"] : props.$isFocused ? props.theme.palette["blue-600"] : props.theme.palette["grey-200"]}`, (props) => props.$subtlePreview && css(["cursor:pointer;&& .ProseMirror{cursor:pointer;padding-left:0;}&&:hover{background:", ";", "{opacity:1;}}", ";"], hexToRgba(props.theme.palette["grey-300"], 0.4), SubtleSuffix, props.$animations ? css(["transition:border-color 0.2s ease,background 0.1s ease-in 0.2s;&& .ProseMirror{transition:padding 0.1s ease-in 0.2s;}&& .ProseMirror p.is-editor-empty:first-child::before{transform:translateY(-6px);transition:transform 0.1s ease-in 0.2s;}&&:hover{.ProseMirror{padding-left:12px;}.ProseMirror p.is-editor-empty:first-child::before{transform:translateY(0);}}"]) : css(["transition:border-color 0.2s ease;", "{transition:none;}"], SubtleSuffix)), (props) => props.$subtlePreview && props.$subtleBlurred && props.$animations && css(["&& .ProseMirror{animation:", " 0.1s ease-in 0.2s backwards;}"], subtleBlurAnimation), (props) => props.$hasError && css(["background:", ";", ";"], props.theme.palette["red-050"], !props.$noBorder && css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.palette["red-600"])), (props) => props.$isFocused && !props.$hasError && !props.$noBorder && css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.palette["blue-600"]));
+const ToolbarArea = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__ToolbarArea",
+  componentId: "sc-8lgglv-3"
+})(["padding:4px;box-shadow:inset 0 -1px 0 0 ", ";> div{> div{flex:0 0 auto;background:transparent;box-shadow:none;padding:2px;border-radius:0;}}"], (props) => props.theme.palette["grey-200"]);
+const ToolbarItems = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__ToolbarItems",
+  componentId: "sc-8lgglv-4"
+})(["&&{display:flex;align-items:center;flex:1 1 auto;min-width:0;overflow:hidden;}> *{flex:0 0 auto;}"]);
+const ToolbarEntry = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "RichTextstyles__ToolbarEntry",
+  componentId: "sc-8lgglv-5"
+})(["display:flex;align-items:center;flex:0 0 auto;"]);
+const EditorArea = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__EditorArea",
+  componentId: "sc-8lgglv-6"
+})([".ProseMirror{padding:12px;outline:none;min-height:", ";height:", ";max-height:", ";overflow-y:auto;font-size:13px;line-height:1.6;color:", ";", ";> * + *{margin-top:0.5em;}h1{font-size:24px;font-weight:500;line-height:1.3;margin:0 0 0.5em;}h2{font-size:20px;font-weight:500;line-height:1.3;margin:0 0 0.5em;}h3{font-size:16px;font-weight:500;line-height:1.3;margin:0 0 0.5em;}p{margin:0 0 4px;}ul,ol{padding-left:24px;margin:0 0 4px;}li{margin:2px 0;}a{color:", ";text-decoration:underline;cursor:pointer;}code{background:", ";padding:2px 4px;border-radius:3px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:12px;}pre{background:", ";padding:12px;border-radius:3px;overflow-x:auto;code{background:none;padding:0;border-radius:0;font-size:12px;}}blockquote{border-left:3px solid ", ";padding-left:12px;margin:0 0 4px;color:", ";}.ds-rt-code-snippet{position:relative;display:flex;align-items:center;background:", ";border-radius:3px;padding:6px 40px 6px 12px;margin:0 0 4px;code{flex:1 1 auto;background:none;padding:0;border-radius:0;white-space:pre;overflow-x:auto;outline:none;}.ds-rt-code-snippet__actions{position:absolute;top:50%;right:4px;transform:translateY(-50%);}}table{border-collapse:collapse;width:100%;margin:0 0 4px;table-layout:fixed;overflow:hidden;td,th{border:1px solid ", ";padding:6px 10px;vertical-align:top;text-align:left;position:relative;> *{margin:0;}}th{background:", ";font-weight:500;}.selectedCell::after{content:'';position:absolute;inset:0;background:", ";opacity:0.4;pointer-events:none;}}s{text-decoration:line-through;}img{max-width:100%;height:auto;border-radius:3px;display:block;margin:8px 0;&.ProseMirror-selectednode{outline:2px solid ", ";outline-offset:2px;}}}.ProseMirror p.is-editor-empty:first-child::before{color:", ";content:attr(data-placeholder);float:left;height:0;pointer-events:none;}"], (props) => props.$subtlePreview ? "32px" : "120px", (props) => props.$height ? typeof props.$height === "number" ? `${props.$height}px` : props.$height : "auto", (props) => props.$maxHeight ? typeof props.$maxHeight === "number" ? `${props.$maxHeight}px` : props.$maxHeight : "none", (props) => props.theme.palette["grey-800"], (props) => props.$readOnly && css(["background:", ";cursor:default;"], props.theme.palette["grey-050"]), (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["grey-100"], (props) => props.theme.palette["grey-100"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["grey-500"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-300"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["grey-400"]);
+const ContentAbove = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__ContentAbove",
+  componentId: "sc-8lgglv-7"
+})(["margin-bottom:8px;"]);
+const ContentBelow = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__ContentBelow",
+  componentId: "sc-8lgglv-8"
+})(["margin-top:8px;"]);
+const ErrorText = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__ErrorText",
+  componentId: "sc-8lgglv-9"
+})(["color:", ";font-size:13px;line-height:1.39;"], (props) => props.theme.palette["red-600"]);
+const Description = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__Description",
+  componentId: "sc-8lgglv-10"
+})(["color:", ";font-size:13px;line-height:1.39;"], (props) => props.theme.palette["grey-500"]);
+const AiGradientLabel = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "RichTextstyles__AiGradientLabel",
+  componentId: "sc-8lgglv-11"
+})(["background:linear-gradient( 90deg,", " 0%,", " 100% );-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;"], (props) => props.theme.palette["mars-500"], (props) => props.theme.palette["purple-400"]);
+const ToolbarSeparator = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__ToolbarSeparator",
+  componentId: "sc-8lgglv-12"
+})(["&&{align-self:center;flex:0 0 auto;width:1px;height:18px;min-height:18px;margin:0 4px;padding:0;border-radius:0;background:", ";}"], (props) => props.theme.palette["grey-200"]);
+const popoverSurface = /* @__PURE__ */ css(["background:", ";border:1px solid ", ";border-radius:3px;box-shadow:0 4px 12px 0 rgba(0,0,0,0.12);"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-200"]);
+const BlockMenu = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__BlockMenu",
+  componentId: "sc-8lgglv-13"
+})(["", ";display:flex;flex-direction:column;gap:2px;padding:4px;min-width:160px;.ds-button{justify-content:flex-start;}.ds-button-label{justify-content:flex-start;}"], popoverSurface);
+const PopoverForm = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__PopoverForm",
+  componentId: "sc-8lgglv-14"
+})(["", ";display:flex;flex-direction:column;gap:8px;padding:12px;min-width:280px;"], popoverSurface);
+const PopoverActions = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "RichTextstyles__PopoverActions",
+  componentId: "sc-8lgglv-15"
+})(["display:flex;gap:8px;"]);
+export {
+  AiGradientLabel,
+  BlockMenu,
+  ContentAbove,
+  ContentBelow,
+  Description,
+  EditorArea,
+  EditorWrapper,
+  ErrorText,
+  PopoverActions,
+  PopoverForm,
+  RichTextWrapper,
+  SubtleSuffix,
+  ToolbarArea,
+  ToolbarEntry,
+  ToolbarItems,
+  ToolbarSeparator
+};

package/dist/RichText.types.d.ts

@@ -0,0 +1,139 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { Editor } from '@tiptap/react';
+import { RichTextDocument } from './blockModel';
+export type RichTextTexts = {
+    paragraph: string;
+    bold: string;
+    italic: string;
+    underline: string;
+    strikethrough: string;
+    heading: string;
+    bulletList: string;
+    orderedList: string;
+    link: string;
+    align: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    codeBlock: string;
+    codeSnippet: string;
+    copySnippet: string;
+    copiedSnippet: string;
+    editWithAI: string;
+    more: string;
+    table: string;
+    insertTable: string;
+    addRowBefore: string;
+    addRowAfter: string;
+    addColumnBefore: string;
+    addColumnAfter: string;
+    deleteRow: string;
+    deleteColumn: string;
+    deleteTable: string;
+    linkPlaceholder: string;
+    linkConfirm: string;
+    linkRemove: string;
+    image: string;
+    imagePlaceholder: string;
+    imageConfirm: string;
+    imageUpload: string;
+};
+export type ToolbarFeature = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'heading' | 'bulletList' | 'orderedList' | 'link' | 'textAlign' | 'codeBlock' | 'codeSnippet' | 'table' | 'image';
+export declare const ALL_TOOLBAR_FEATURES: ToolbarFeature[];
+export declare const DEFAULT_HEADING_LEVELS: (1 | 2 | 3 | 4 | 5 | 6)[];
+export declare const DEFAULT_TEXTS: RichTextTexts;
+export type RichTextFormat = 'html' | 'document' | 'markdown';
+export type RichTextAIOption = {
+    key: string;
+    label: ReactNode;
+    /** Rendered as the ds-button `icon` — pass e.g. `<Icon component={<AiStarM />} />`. */
+    icon?: ReactNode;
+    /**
+     * Called with the current selection (or the full text when nothing is
+     * selected). A resolved string replaces the selection; resolving with
+     * null/undefined leaves the content unchanged (when the consumer handles
+     * the action itself, e.g. opens its own dialog).
+     */
+    onSelect: (selectedText: string) => Promise<string | null | void> | string | null | void;
+};
+export type RichTextProps = {
+    /**
+     * Output format for `value` / `defaultValue` / `onChange`:
+     * - `'html'` (default) — HTML string
+     * - `'document'` — `RichTextDocument` (JSON block model)
+     * - `'markdown'` — Markdown string
+     */
+    format?: RichTextFormat;
+    value?: string | RichTextDocument;
+    defaultValue?: string | RichTextDocument;
+    onChange?: (value: string | RichTextDocument) => void;
+    onEditorReady?: (editor: Editor) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    label?: ReactNode;
+    tooltip?: ReactNode;
+    tooltipConfig?: TooltipProps;
+    description?: ReactNode;
+    errorText?: ReactNode;
+    height?: string | number;
+    maxHeight?: string | number;
+    toolbarFeatures?: ToolbarFeature[];
+    hideToolbar?: boolean;
+    /**
+     * Subtle (inline-edit) mode, like SubtleForm components. The editor starts as a
+     * borderless preview; hovering shows a grey background and an edit icon, clicking
+     * anywhere on the field switches to edit mode (toolbar + border), and clicking
+     * outside returns to preview. `errorText` forces edit mode.
+     */
+    subtle?: boolean;
+    headingLevels?: (1 | 2 | 3 | 4 | 5 | 6)[];
+    texts?: Partial<RichTextTexts>;
+    noBorder?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    autoFocus?: boolean;
+    onImageUpload?: (file: File) => string | Promise<string>;
+    /**
+     * AI "Edit with AI" handler. When provided, the toolbar shows an "Edit with AI" button;
+     * on click the current selection (or full text when nothing is selected, possibly an
+     * empty string) is passed in and the resolved string replaces it. Resolving with
+     * null/undefined leaves the content unchanged, so the handler can drive an external
+     * flow (e.g. a platform agent) instead. The design system performs no AI call itself.
+     */
+    onEditWithAI?: (selectedText: string) => Promise<string | null | undefined>;
+    /**
+     * When provided (non-empty), the "Edit with AI" button opens a dropdown with
+     * these options instead of calling `onEditWithAI` directly. Options and their
+     * behavior are fully defined by the consumer.
+     */
+    editWithAIOptions?: RichTextAIOption[];
+    /**
+     * Enables the SubtleForm-style transitions in `subtle` mode (content sliding
+     * right on hover, placeholder dropping into place, blur compensation).
+     * When disabled (default), hovering the preview only tints the background.
+     */
+    animations?: boolean;
+};
+export type ToolbarProps = {
+    editor: Editor | null;
+    features: ToolbarFeature[];
+    headingLevels: (1 | 2 | 3 | 4 | 5 | 6)[];
+    texts: RichTextTexts;
+    disabled?: boolean;
+    onImageUpload?: (file: File) => string | Promise<string>;
+    onEditWithAI?: (selectedText: string) => Promise<string | null | undefined>;
+    editWithAIOptions?: RichTextAIOption[];
+};
+export type LinkPopoverProps = {
+    editor: Editor;
+    texts: RichTextTexts;
+    onClose: () => void;
+};
+export type ImagePopoverProps = {
+    editor: Editor;
+    texts: RichTextTexts;
+    onClose: () => void;
+    onImageUpload?: (file: File) => string | Promise<string>;
+};