@rcarls/rc-markdown-editor 0.3.1 → 0.4.0

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-CcTLdYIt.js";
+import { R as o, a as t } from "./rc-editor-toolbar-QnCEnJ2R.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-CcTLdYIt.js";
+import { R as a, a as d } from "./rc-editor-toolbar-QnCEnJ2R.js";
 export {
   a as RcEditorToolbar,
   d as RcMarkdownEditor

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

@@ -1,28 +1,58 @@
-import { LitElement } from 'lit';
+import { LitElement, SVGTemplateResult, TemplateResult } from 'lit';
 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.
+ * Formatting toolbar for `<rc-markdown-editor>`. Renders themed `rc-button`,
+ * `rc-select`, and `rc-toolbar` controls into its own light DOM so the parent
+ * editor can provide their shared appearance.
  *
  * Active-format properties are set by the parent editor and reflected as
  * `aria-pressed` on the corresponding buttons. Heading level is shown via an
  * `<rc-select>`. Code-block language is shown via a `<input>` when active.
  *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-markdown-editor rc-markdown-editor docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ WAI-ARIA Toolbar pattern}
+ *
  * @fires rc-toolbar-action - When a formatting button or select is activated.
+ *
+ * @attr label - Accessible label applied to the `rc-toolbar` container.
+ * @attr active-bold - Reflects Bold as active at the cursor.
+ * @attr active-italic - Reflects Italic as active at the cursor.
+ * @attr active-underline - Reflects Underline as active at the cursor.
+ * @attr active-strikethrough - Reflects Strikethrough as active at the cursor.
+ * @attr active-code - Reflects inline Code as active at the cursor.
+ * @attr active-link - Reflects Link as active at the cursor.
+ * @attr active-heading - Heading level active at the cursor, or absent for paragraph text.
+ * @attr active-blockquote - Reflects Blockquote as active at the cursor.
+ * @attr active-bullet-list - Reflects Bullet List as active at the cursor.
+ * @attr active-ordered-list - Reflects Ordered List as active at the cursor.
+ * @attr active-code-block - Reflects Code Block as active at the cursor.
+ * @attr code-language - Language of the code block at the cursor; absent when not in a code block.
+ * @attr source-mode - Whether the parent editor is in source mode.
  */
 export declare class RcEditorToolbar extends LitElement {
-    /** `aria-label` applied to the `[role="toolbar"]` container. */
+    /** Accessible label applied to the `rc-toolbar` container. */
     label: string;
+    /** Whether Bold formatting is active at the cursor. */
     activeBold: boolean;
+    /** Whether Italic formatting is active at the cursor. */
     activeItalic: boolean;
+    /** Whether Underline formatting is active at the cursor. */
     activeUnderline: boolean;
+    /** Whether Strikethrough formatting is active at the cursor. */
     activeStrikethrough: boolean;
+    /** Whether inline Code formatting is active at the cursor. */
     activeCode: boolean;
+    /** Whether the cursor is inside a Link. */
     activeLink: boolean;
+    /** Heading level active at the cursor, or `null` for paragraph text. */
     activeHeading: HeadingLevel | null;
+    /** Whether the cursor is inside a Blockquote. */
     activeBlockquote: boolean;
+    /** Whether the cursor is inside a Bullet List. */
     activeBulletList: boolean;
+    /** Whether the cursor is inside an Ordered List. */
     activeOrderedList: boolean;
+    /** Whether the cursor is inside a Code Block. */
     activeCodeBlock: boolean;
     /**
      * Language of the code block at the cursor. `null` means not in a code block
@@ -32,7 +62,7 @@ export declare class RcEditorToolbar extends LitElement {
     /** Whether the editor is in source mode. */
     sourceMode: boolean;
     protected _langInputValue: string;
-    createRenderRoot(): this;
+    createRenderRoot(): HTMLElement;
     updated(changed: Map<string, unknown>): void;
     protected _dispatch(action: EditorToolbarAction, extra?: Partial<EditorToolbarActionDetail>): void;
     protected _onClick: (e: MouseEvent) => void;
@@ -40,5 +70,6 @@ export declare class RcEditorToolbar extends LitElement {
     protected _onLangInput: (e: Event) => void;
     protected _onLangCommit: () => void;
     protected _onLangKeyDown: (e: KeyboardEvent) => void;
-    render(): import('lit').TemplateResult<1>;
+    protected _renderActionButton(action: EditorToolbarAction, label: string, title: string, active: boolean, icon: SVGTemplateResult): TemplateResult;
+    render(): TemplateResult<1>;
 }

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

@@ -23,29 +23,62 @@ import { ActiveFormats, EditorMode, EditorToolbarAction, EditorToolbarActionDeta
  *
  * @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 }`.
+ * @slot - Accepts a native `<textarea>` element (and optional `<label>`) for form wiring.
+ *
+ * @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.
+ * @csspart toolbar - The `<rc-editor-toolbar>` element.
+ * @csspart rich-view - The contenteditable rich-text view.
+ *
+ * @attr toolbar - Show the formatting toolbar.
+ * @attr source-mode - Controlled: show the markdown source editor.
+ * @attr default-source-mode - Uncontrolled initial source-mode state.
+ * @attr read-only - Make the editor read-only.
+ * @attr value - Current Markdown value.
+ * @attr default-value - Initial uncontrolled Markdown value.
+ *
+ * @cssprop [--rme-font-family=inherit] - Font family of the rich-text view
+ * @cssprop [--rme-font-size=inherit] - Font size of the rich-text view
+ * @cssprop [--rme-line-height=1.6] - Line height of the rich-text view
+ * @cssprop [--rme-padding=0.75em 1em] - Padding inside the rich-text view
+ * @cssprop [--rme-background=Canvas] - Background color of the rich-text view
+ * @cssprop [--rme-color=CanvasText] - Text color of the rich-text view
+ * @cssprop [--rme-border=1px solid ButtonBorder] - Border around the rich-text view
+ * @cssprop [--rme-border-radius=0 0 4px 4px] - Border radius of the rich-text view
+ * @cssprop [--rme-focus-outline=2px solid Highlight] - Focus ring outline on the rich-text view
+ * @cssprop [--rme-src-font-family='Cascadia Code', 'Fira Code', ui-monospace, monospace] - Font family of the source editor
+ * @cssprop [--rme-toolbar-gap=1px] - Gap between toolbar buttons
+ * @cssprop [--rme-toolbar-button-size=2rem] - Minimum inline and block size of toolbar buttons
+ * @cssprop [--rme-src-heading-color=light-dark(#1d6fc4, #82b4f5)] - Source-mode heading token color
+ * @cssprop [--rme-src-code-color=light-dark(#c94a1a, #f09060)] - Source-mode inline/fenced code token color
+ * @cssprop [--rme-src-link-color=light-dark(#0370b0, #60b8e8)] - Source-mode link token color
+ * @cssprop [--rme-src-blockquote-color=light-dark(#2d7a42, #70b880)] - Source-mode blockquote token color
+ * @cssprop [--rme-src-list-color=light-dark(#7a5c0a, #d4ac48)] - Source-mode list marker token color
+ * @cssprop [--rme-src-dim-color=GrayText] - Source-mode strikethrough token color
  */
 export declare class RcMarkdownEditor extends LitElement {
     static styles: import('lit').CSSResult;
     private _value;
     private _defaultValue;
     private _valueInitialized;
+    /** Initial uncontrolled Markdown value. */
     get defaultValue(): string;
     set defaultValue(v: string);
+    /** Current Markdown value. Host writes are silent. */
     get value(): string;
     set value(v: string);
     private _sourceMode;
     private _defaultSourceMode;
     private _sourceModeInitialized;
+    /** Initial uncontrolled source-mode state. */
     get defaultSourceMode(): boolean;
     set defaultSourceMode(v: boolean);
+    /**
+     * Controlled: show the markdown source editor instead of the rich view.
+     * Host writes are silent; toolbar/keyboard toggles dispatch `rc-mode-change`.
+     */
     get sourceMode(): boolean;
     set sourceMode(v: boolean);
     /** Show the formatting toolbar. */
@@ -63,6 +96,7 @@ export declare class RcMarkdownEditor extends LitElement {
     protected _ignoreRichMutations: boolean;
     protected _richViewRendered: boolean;
     protected _cachedTree: ReturnType<typeof fromMarkdown> | null;
+    protected _renderedMode: EditorMode | null;
     protected _firstUpdatedDone: boolean;
     protected _$linkPopover?: HTMLDivElement;
     protected _$linkPopoverInput?: HTMLInputElement;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Rich/source Markdown editor with a formatting toolbar, backed by rc-textarea.",
   "repository": {
     "type": "git",
@@ -45,8 +45,10 @@
     "test:browser:firefox": "vitest --run --project=firefox"
   },
   "dependencies": {
+    "@rcarls/rc-button": "workspace:*",
     "@rcarls/rc-select": "workspace:*",
-    "@rcarls/rc-textarea": "workspace:*"
+    "@rcarls/rc-textarea": "workspace:*",
+    "@rcarls/rc-toolbar": "workspace:*"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",