@rcarls/rc-markdown-editor 0.2.0 → 0.3.1

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

@@ -1,5 +1,5 @@
 import "@rcarls/rc-textarea/define";
-import { R as o, a as t } from "./rc-editor-toolbar-B74gMsna.js";
+import { R as o, a as t } from "./rc-editor-toolbar-CcTLdYIt.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.js

@@ -1,4 +1,4 @@
-import { R as a, a as d } from "./rc-editor-toolbar-B74gMsna.js";
+import { R as a, a as d } from "./rc-editor-toolbar-CcTLdYIt.js";
 export {
   a as RcEditorToolbar,
   d as RcMarkdownEditor

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

@@ -1,5 +1,15 @@
 import { Decoration } from '@rcarls/rc-textarea';
 import { ActiveFormats } from './types.ts';
+/**
+ * Replaces the language token on the opening fence of the code block containing
+ * `selectionStart`. Returns the updated string, or `null` if the cursor is not
+ * inside a fenced code block.
+ *
+ * @param value - Full source editor value.
+ * @param selectionStart - Cursor offset used to locate the containing fence.
+ * @param language - Language string to write (empty string removes the token).
+ */
+export declare function setCodeBlockLanguage(value: string, selectionStart: number, language: string): string | null;
 /**
  * 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

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,12 +1,12 @@
 import { LitElement } from 'lit';
-import { HeadingLevel } from './types.ts';
+import { EditorToolbarAction, EditorToolbarActionDetail, 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.
+ * `aria-pressed` on the corresponding buttons. Heading level is shown via an
+ * `<rc-select>`. Code-block language is shown via a `<input>` when active.
  *
  * @fires rc-toolbar-action - When a formatting button or select is activated.
  */
@@ -18,6 +18,7 @@ export declare class RcEditorToolbar extends LitElement {
     activeUnderline: boolean;
     activeStrikethrough: boolean;
     activeCode: boolean;
+    activeLink: boolean;
     activeHeading: HeadingLevel | null;
     activeBlockquote: boolean;
     activeBulletList: boolean;
@@ -30,15 +31,14 @@ export declare class RcEditorToolbar extends LitElement {
     codeLanguage: string | null;
     /** Whether the editor is in source mode. */
     sourceMode: boolean;
-    /** Tracks the in-progress language input value before commit. */
-    private _langInputValue;
+    protected _langInputValue: string;
     createRenderRoot(): this;
     updated(changed: Map<string, unknown>): void;
-    private _dispatch;
-    private _onClick;
-    private _onHeadingChange;
-    private _onLangInput;
-    private _onLangCommit;
-    private _onLangKeyDown;
+    protected _dispatch(action: EditorToolbarAction, extra?: Partial<EditorToolbarActionDetail>): void;
+    protected _onClick: (e: MouseEvent) => void;
+    protected _onHeadingChange: (e: Event) => void;
+    protected _onLangInput: (e: Event) => void;
+    protected _onLangCommit: () => void;
+    protected _onLangKeyDown: (e: KeyboardEvent) => void;
     render(): import('lit').TemplateResult<1>;
 }

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

@@ -1,6 +1,9 @@
 import { LitElement } from 'lit';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { RCTextarea, RCTextareaPluginAPI } from '@rcarls/rc-textarea';
+import { ActiveFormats, EditorMode, EditorToolbarAction, EditorToolbarActionDetail, HeadingLevel } from './types.ts';
 /**
- * Markdown-backed rich-text editor with two first-class modes:
+ * Rich/source Markdown editor with a formatting toolbar, backed by rc-textarea.
  *
  * - **Rich mode (default)**: A `contenteditable` div shows micromark-rendered
  *   HTML. DOM mutations are converted back to markdown via turndown and
@@ -18,6 +21,8 @@ import { LitElement } from 'lit';
  * </rc-markdown-editor>
  * ```
  *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-markdown-editor rc-markdown-editor docs}
+ *
  * @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`.
@@ -47,52 +52,64 @@ export declare class RcMarkdownEditor extends LitElement {
     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;
+    protected _$richView: HTMLDivElement;
+    protected _$sourceEditor: RCTextarea;
+    protected _$toolbar?: HTMLElement;
+    protected _observer: MutationObserver | null;
+    protected _$savedRange: Range | null;
+    protected _activeFormats: ActiveFormats;
+    protected _syncTimer: ReturnType<typeof setTimeout> | null;
+    protected _pluginApi: RCTextareaPluginAPI | null;
+    protected _ignoreRichMutations: boolean;
+    protected _richViewRendered: boolean;
+    protected _cachedTree: ReturnType<typeof fromMarkdown> | null;
+    protected _firstUpdatedDone: boolean;
+    protected _$linkPopover?: HTMLDivElement;
+    protected _$linkPopoverInput?: HTMLInputElement;
+    protected _linkPopoverOpen: boolean;
+    protected _linkPopoverHref: string;
     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;
+    protected _setRichViewContent(markdown: string): void;
+    protected _renderMarkdown(markdown: string): string;
+    protected _scheduleMarkdownSync(): void;
+    protected _syncMarkdownFromRichView(): void;
+    protected _switchToSource(): void;
+    protected _switchToRich(): void;
+    protected _setupSourcePlugin(): void;
+    protected _getCodeBlockLanguage(tree: ReturnType<typeof fromMarkdown>, offset: number): string | null;
+    protected _onSourceChange: (_e: Event) => void;
+    protected _onToolbarAction: (e: CustomEvent<EditorToolbarActionDetail>) => void;
+    protected _applyRichFormat(action: EditorToolbarAction): void;
+    protected _applySourceFormat(action: EditorToolbarAction): void;
     /** Sets the heading level on the cursor's line in source mode. null = paragraph. */
-    private _setSourceHeadingLevel;
+    protected _setSourceHeadingLevel(level: HeadingLevel | null): void;
     /** 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;
+    protected _setSourceCodeBlockLanguage(lang: string): void;
+    /** Updates the `data-lang` attribute on the `<pre>` at the cursor in rich mode. */
+    protected _setRichCodeBlockLanguage(lang: string): void;
+    /** Toggles a line prefix (e.g. `'> '`, `'- '`) on the cursor's line. */
+    protected _toggleLinePrefix(prefix: string): void;
     /** 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;
+    protected _toggleSourceCodeFence(): void;
+    protected _wrapRichSelection(tag: string): void;
+    protected _toggleRichCodeBlock(): void;
+    protected _onKeyDown: (e: KeyboardEvent) => void;
+    protected _onSelectionChange: () => void;
+    protected _pushToolbarState(): void;
+    protected _syncNativeTextarea(): void;
+    protected _connectLabel(): void;
+    protected _onRichViewClick: (e: MouseEvent) => void;
+    protected _onDocumentClick: (e: MouseEvent) => void;
+    protected _expandRichSelectionToWord(): void;
+    protected _positionLinkPopover(): void;
+    protected _applyLink: () => void;
+    protected _removeLink: () => void;
+    protected _openLinkHref: () => void;
+    protected _onLinkPopoverKeyDown: (e: KeyboardEvent) => void;
+    protected _dispatchChange(value: string): void;
+    protected _dispatchModeChange(mode: EditorMode): void;
 }

package/package.json

@@ -3,14 +3,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
-  "description": "Headless markdown editor web component extending rc-textarea, built with Lit",
+  "version": "0.3.1",
+  "description": "Rich/source Markdown editor with a formatting toolbar, backed by rc-textarea.",
   "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",
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-markdown-editor",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,21 +37,19 @@
   ],
   "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"
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
-    "@rcarls/rc-textarea": "workspace:^"
+    "@rcarls/rc-select": "workspace:*",
+    "@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",

package/dist/demo.css

@@ -1,85 +0,0 @@
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-:root {
-  color-scheme: light dark;
-  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
-}
-
-@supports (color: AccentColor) {
-  :root {
-    --rc-accent: AccentColor;
-  }
-}
-
-[data-theme="light"] { color-scheme: light; }
-[data-theme="dark"]  { color-scheme: dark;  }
-
-[data-theme="solarized-light"] {
-  color-scheme: light;
-  --rc-surface: #fdf6e3;
-  --rc-text:    #657b83;
-  --rc-border:  1px solid #93a1a1;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
-}
-
-[data-theme="solarized-dark"] {
-  color-scheme: dark;
-  --rc-surface: #002b36;
-  --rc-text:    #839496;
-  --rc-border:  1px solid #586e75;
-  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
-}
-
-body {
-  font-family: system-ui, sans-serif;
-  margin: 0;
-}
-
-.demo-page {
-  max-width: 60rem;
-  margin: 0 auto;
-  padding: 2rem 1.5rem;
-}
-
-.demo-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid ButtonBorder;
-}
-
-.demo-controls .demo-title {
-  flex: 1;
-}
-
-.demo-controls h1 {
-  margin: 0 0 0.15rem;
-  font-size: 1.5rem;
-}
-
-.demo-controls a {
-  font-size: 0.8rem;
-}
-
-.demo-section {
-  margin-bottom: 2rem;
-}
-
-.demo-section h2 {
-  margin: 0 0 0.5rem;
-}
-
-.theme-picker {
-  padding: 0.35em 0.75em;
-  font-family: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  border: 1px solid ButtonBorder;
-  border-radius: 4px;
-  background: Canvas;
-  color: CanvasText;
-}

package/dist/demo.js

@@ -1,40 +0,0 @@
-const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
-const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
-
-const stored = localStorage.getItem('rc-demo-theme') ?? '';
-applyTheme(stored);
-
-function applyTheme(theme) {
-  if (theme) {
-    document.documentElement.dataset.theme = theme;
-  } else {
-    delete document.documentElement.dataset.theme;
-  }
-}
-
-function currentIndex() {
-  const current = document.documentElement.dataset.theme ?? '';
-  const idx = THEMES.indexOf(current);
-  return idx === -1 ? 0 : idx;
-}
-
-function updateButtons() {
-  const label = LABELS[currentIndex()];
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.textContent = label;
-  });
-}
-
-window.cycleTheme = function () {
-  const next = THEMES[(currentIndex() + 1) % THEMES.length];
-  applyTheme(next);
-  localStorage.setItem('rc-demo-theme', next);
-  updateButtons();
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  updateButtons();
-  document.querySelectorAll('.theme-picker').forEach((btn) => {
-    btn.addEventListener('click', window.cycleTheme);
-  });
-});