@rcarls/rc-markdown-editor 0.1.0

package/dist/rc-markdown-editor-define.js

@@ -0,0 +1,5 @@
+import "@rcarls/rc-textarea/define";
+import { R as o, a as t } from "./rc-editor-toolbar-B74gMsna.js";
+customElements.get("rc-editor-toolbar") ?? customElements.define("rc-editor-toolbar", o);
+customElements.get("rc-markdown-editor") ?? customElements.define("rc-markdown-editor", t);
+//# sourceMappingURL=rc-markdown-editor-define.js.map

package/dist/rc-markdown-editor-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-markdown-editor-define.js","sources":["../src/define.ts"],"sourcesContent":["import '@rcarls/rc-textarea/define';\n\nimport { RcEditorToolbar } from './rc-editor-toolbar.ts';\nimport { RcMarkdownEditor } from './rc-markdown-editor.ts';\n\ncustomElements.get('rc-editor-toolbar')   ?? customElements.define('rc-editor-toolbar',   RcEditorToolbar);\ncustomElements.get('rc-markdown-editor')  ?? customElements.define('rc-markdown-editor',  RcMarkdownEditor);\n"],"names":["RcEditorToolbar","RcMarkdownEditor"],"mappings":";;AAKA,eAAe,IAAI,mBAAmB,KAAO,eAAe,OAAO,qBAAuBA,CAAe;AACzG,eAAe,IAAI,oBAAoB,KAAM,eAAe,OAAO,sBAAuBC,CAAgB;"}

package/dist/rc-markdown-editor.js

@@ -0,0 +1,6 @@
+import { R as a, a as d } from "./rc-editor-toolbar-B74gMsna.js";
+export {
+  a as RcEditorToolbar,
+  d as RcMarkdownEditor
+};
+//# sourceMappingURL=rc-markdown-editor.js.map

package/dist/rc-markdown-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-markdown-editor.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-markdown-editor/src/formatting.d.ts

@@ -0,0 +1,8 @@
+import { Decoration } from '@rcarls/rc-textarea';
+import { ActiveFormats } from './types.ts';
+/**
+ * Derives active inline and block formats from the decoration array at a given
+ * selection range in the markdown source editor. Used for toolbar state sync in
+ * source mode.
+ */
+export declare function getFormatsFromDecorations(decorations: readonly Decoration[], start: number, end: number): Omit<ActiveFormats, 'codeLanguage'>;

package/dist/types/packages/rc-markdown-editor/src/icons.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Bootstrap Icons v1.x (MIT) used for `<rc-editor-toolbar>`.
+ * Icons source: https://icons.getbootstrap.com/
+ * License: MIT — https://github.com/twbs/icons/blob/main/LICENSE
+ *
+ * All icons use `currentColor` so they inherit button text colour,
+ * including forced-colours mode. ViewBox is 0 0 16 16; rendered at
+ * 1em so they scale with the button's font-size.
+ */
+export declare const icons: {
+    bold: import('lit').TemplateResult<2>;
+    italic: import('lit').TemplateResult<2>;
+    underline: import('lit').TemplateResult<2>;
+    strikethrough: import('lit').TemplateResult<2>;
+    code: import('lit').TemplateResult<2>;
+    link: import('lit').TemplateResult<2>;
+    blockquote: import('lit').TemplateResult<2>;
+    bulletList: import('lit').TemplateResult<2>;
+    orderedList: import('lit').TemplateResult<2>;
+    codeBlock: import('lit').TemplateResult<2>;
+    source: import('lit').TemplateResult<2>;
+};

package/dist/types/packages/rc-markdown-editor/src/index.d.ts

@@ -0,0 +1,3 @@
+export { RcMarkdownEditor } from './rc-markdown-editor.ts';
+export { RcEditorToolbar } from './rc-editor-toolbar.ts';
+export type { EditorToolbarAction, EditorToolbarActionDetail, ActiveFormats, EditorMode, HeadingLevel, } from './types.ts';

package/dist/types/packages/rc-markdown-editor/src/rc-editor-toolbar.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import { HeadingLevel } from './types.ts';
+/**
+ * Formatting toolbar for `<rc-markdown-editor>`. Renders into its own light DOM
+ * so the parent shadow stylesheet can reach `rc-editor-toolbar button` directly.
+ *
+ * Active-format properties are set by the parent editor and reflected as
+ * `aria-pressed` on the corresponding buttons. Heading level is shown via a
+ * `<select>`. Code-block language is shown via a `<input>` when active.
+ *
+ * @fires rc-toolbar-action - When a formatting button or select is activated.
+ */
+export declare class RcEditorToolbar extends LitElement {
+    /** `aria-label` applied to the `[role="toolbar"]` container. */
+    label: string;
+    activeBold: boolean;
+    activeItalic: boolean;
+    activeUnderline: boolean;
+    activeStrikethrough: boolean;
+    activeCode: boolean;
+    activeHeading: HeadingLevel | null;
+    activeBlockquote: boolean;
+    activeBulletList: boolean;
+    activeOrderedList: boolean;
+    activeCodeBlock: boolean;
+    /**
+     * Language of the code block at the cursor. `null` means not in a code block
+     * (hides the language input). `''` means no language is set.
+     */
+    codeLanguage: string | null;
+    /** Whether the editor is in source mode. */
+    sourceMode: boolean;
+    /** Tracks the in-progress language input value before commit. */
+    private _langInputValue;
+    createRenderRoot(): this;
+    updated(changed: Map<string, unknown>): void;
+    private _dispatch;
+    private _onClick;
+    private _onHeadingChange;
+    private _onLangInput;
+    private _onLangCommit;
+    private _onLangKeyDown;
+    render(): import('lit').TemplateResult<1>;
+}

package/dist/types/packages/rc-markdown-editor/src/rc-markdown-editor.d.ts

@@ -0,0 +1,98 @@
+import { LitElement } from 'lit';
+/**
+ * Markdown-backed rich-text editor with two first-class modes:
+ *
+ * - **Rich mode (default)**: A `contenteditable` div shows micromark-rendered
+ *   HTML. DOM mutations are converted back to markdown via turndown and
+ *   written to the backing `<textarea>` for form participation.
+ * - **Source mode**: An `<rc-textarea>` instance shows the markdown source
+ *   with live decorations. Toggle via `source-mode` attribute or Ctrl+Shift+S.
+ *
+ * Consumer markup follows the same progressive-enhancement contract as
+ * `<rc-textarea>`:
+ *
+ * ```html
+ * <rc-markdown-editor>
+ *   <label for="body">Content</label>
+ *   <textarea id="body" name="body"></textarea>
+ * </rc-markdown-editor>
+ * ```
+ *
+ * @fires rc-change          - Value changed. Detail: `{ value: string }`.
+ * @fires rc-mode-change     - Mode toggled. Detail: `{ mode: EditorMode }`.
+ * @fires rc-formatting-change - Active formats at cursor changed. Detail: `ActiveFormats`.
+ *
+ * @attr {boolean} toolbar       - Show the formatting toolbar (default: true).
+ * @attr {boolean} source-mode   - Controlled: show the markdown source editor.
+ * @attr {boolean} default-source-mode - Uncontrolled initial source-mode state.
+ * @attr {boolean} read-only     - Make the editor read-only.
+ */
+export declare class RcMarkdownEditor extends LitElement {
+    static styles: import('lit').CSSResult;
+    private _value;
+    private _defaultValue;
+    private _valueInitialized;
+    get defaultValue(): string;
+    set defaultValue(v: string);
+    get value(): string;
+    set value(v: string);
+    private _sourceMode;
+    private _defaultSourceMode;
+    private _sourceModeInitialized;
+    get defaultSourceMode(): boolean;
+    set defaultSourceMode(v: boolean);
+    get sourceMode(): boolean;
+    set sourceMode(v: boolean);
+    /** Show the formatting toolbar. */
+    toolbar: boolean;
+    /** Make the editor read-only. */
+    readOnly: boolean;
+    private _richView;
+    private _sourceEditor;
+    private _toolbarEl?;
+    private _observer;
+    private _savedRichRange;
+    private _activeFormats;
+    private _syncTimer;
+    private _pluginApi;
+    private _ignoreRichMutations;
+    private _richViewRendered;
+    private _skipNextModeSwitch;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): import('lit').TemplateResult<1>;
+    private _setRichViewContent;
+    private _renderMarkdown;
+    private _scheduleMarkdownSync;
+    private _syncMarkdownFromRichView;
+    private _switchToSource;
+    private _switchToRich;
+    private _cachedTree;
+    private _setupSourcePlugin;
+    private _getCodeBlockLanguage;
+    private _onSourceChange;
+    private _onToolbarAction;
+    private _applyRichFormat;
+    private _applySourceFormat;
+    /** Sets the heading level on the cursor's line in source mode. null = paragraph. */
+    private _setSourceHeadingLevel;
+    /** Updates the language of the code block at the cursor in source mode. */
+    private _setSourceCodeBlockLanguage;
+    /** Updates the data-lang attribute on the <pre> at the cursor in rich mode. */
+    private _setRichCodeBlockLanguage;
+    /** Toggles a line prefix (e.g. `'# '`, `'> '`, `'- '`) on the cursor's line. */
+    private _toggleLinePrefix;
+    /** Wraps the current selection (or cursor line) with a fenced code block. */
+    private _toggleSourceCodeFence;
+    private _wrapRichSelection;
+    private _toggleRichCodeBlock;
+    private _onKeyDown;
+    private _onSelectionChange;
+    private _pushToolbarState;
+    private _syncNativeTextarea;
+    private _connectLabel;
+    private _dispatchChange;
+    private _dispatchModeChange;
+}

package/dist/types/packages/rc-markdown-editor/src/rc-markdown-editor.styles.d.ts

@@ -0,0 +1 @@
+export declare const rmeStyles: import('lit').CSSResult;

package/dist/types/packages/rc-markdown-editor/src/types.d.ts

@@ -0,0 +1,42 @@
+/** Actions dispatched by `<rc-editor-toolbar>` via the `rc-toolbar-action` event. */
+export type EditorToolbarAction = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code' | 'link' | 'heading' | 'blockquote' | 'bullet-list' | 'ordered-list' | 'code-block' | 'code-block-language' | 'source';
+/** Detail payload carried by `rc-toolbar-action` custom events. */
+export interface EditorToolbarActionDetail {
+    action: EditorToolbarAction;
+    /** Heading level for `action === 'heading'`; null means paragraph. */
+    headingLevel?: HeadingLevel | null;
+    /** Language string for `action === 'code-block-language'`. */
+    codeLanguage?: string;
+}
+/** Heading level active at the current cursor position. */
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/** Inline and block formatting state at the current cursor position or selection. */
+export interface ActiveFormats {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    strikethrough?: boolean;
+    code?: boolean;
+    link?: boolean;
+    heading?: HeadingLevel | null;
+    blockquote?: boolean;
+    bulletList?: boolean;
+    orderedList?: boolean;
+    codeBlock?: boolean;
+    /** Language of the code block at the cursor, or null if none / not in a code block. */
+    codeLanguage?: string | null;
+}
+/** Editor display mode. */
+export type EditorMode = 'rich' | 'source';
+declare global {
+    interface HTMLElementEventMap {
+        'rc-toolbar-action': CustomEvent<EditorToolbarActionDetail>;
+        'rc-change': CustomEvent<{
+            value: string;
+        }>;
+        'rc-mode-change': CustomEvent<{
+            mode: EditorMode;
+        }>;
+        'rc-formatting-change': CustomEvent<ActiveFormats>;
+    }
+}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@rcarls/rc-markdown-editor",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless markdown editor web component extending rc-textarea, built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-markdown-editor"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-markdown-editor.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-markdown-editor/src/index.d.ts",
+        "default": "./dist/rc-markdown-editor.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-markdown-editor/src/define.d.ts",
+        "default": "./dist/rc-markdown-editor-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-markdown-editor/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-markdown-editor-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest",
+    "test:browser:chrome": "vitest --project=chromium",
+    "test:browser:firefox": "vitest --project=firefox",
+    "yalc:publish": "yalc publish --push"
+  },
+  "dependencies": {
+    "@rcarls/rc-textarea": "workspace:^"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@guanghechen/rollup-plugin-copy": "^6.0.9",
+    "@types/turndown": "^5.0.5",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-gfm-strikethrough": "^2.0.0",
+    "micromark": "^4.0.2",
+    "micromark-extension-gfm-strikethrough": "^2.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "turndown": "^7.2.0",
+    "typescript": "~5.9.3",
+    "unist-util-visit": "^5.0.0",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}