@rcarls/rc-markdown-editor 0.6.0 → 0.7.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-QnCEnJ2R.js";
+import { R as o, a as t } from "./rc-editor-toolbar-DZHqoNun.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

@@ -1 +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.js';\nimport { RcMarkdownEditor } from './rc-markdown-editor.js';\n\ncustomElements.get('rc-editor-toolbar') ??\n  customElements.define('rc-editor-toolbar', RcEditorToolbar);\ncustomElements.get('rc-markdown-editor') ??\n  customElements.define('rc-markdown-editor', RcMarkdownEditor);\n"],"names":["RcEditorToolbar","RcMarkdownEditor"],"mappings":";;AAKA,eAAe,IAAI,mBAAmB,KACpC,eAAe,OAAO,qBAAqBA,CAAe;AAC5D,eAAe,IAAI,oBAAoB,KACrC,eAAe,OAAO,sBAAsBC,CAAgB;"}
+{"version":3,"file":"rc-markdown-editor-define.js","sources":["../src/define.ts"],"sourcesContent":["import '@rcarls/rc-textarea/define';\nimport { RcEditorToolbar } from './rc-editor-toolbar.js';\nimport { RcMarkdownEditor } from './rc-markdown-editor.js';\n\ncustomElements.get('rc-editor-toolbar') ??\n  customElements.define('rc-editor-toolbar', RcEditorToolbar);\n\ncustomElements.get('rc-markdown-editor') ??\n  customElements.define('rc-markdown-editor', RcMarkdownEditor);\n"],"names":["RcEditorToolbar","RcMarkdownEditor"],"mappings":";;AAIA,eAAe,IAAI,mBAAmB,KACpC,eAAe,OAAO,qBAAqBA,CAAe;AAE5D,eAAe,IAAI,oBAAoB,KACrC,eAAe,OAAO,sBAAsBC,CAAgB;"}

package/dist/rc-markdown-editor.js

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

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

@@ -5,9 +5,9 @@ import { ActiveFormats } from './types.js';
  * `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).
+ * @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;
 /**

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

@@ -8,15 +8,15 @@
  * 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>;
+    bold: import('lit-html').TemplateResult<2>;
+    italic: import('lit-html').TemplateResult<2>;
+    underline: import('lit-html').TemplateResult<2>;
+    strikethrough: import('lit-html').TemplateResult<2>;
+    code: import('lit-html').TemplateResult<2>;
+    link: import('lit-html').TemplateResult<2>;
+    blockquote: import('lit-html').TemplateResult<2>;
+    bulletList: import('lit-html').TemplateResult<2>;
+    orderedList: import('lit-html').TemplateResult<2>;
+    codeBlock: import('lit-html').TemplateResult<2>;
+    source: import('lit-html').TemplateResult<2>;
 };

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

@@ -1,20 +1,57 @@
 import { LitElement, SVGTemplateResult, TemplateResult } from 'lit';
 import { EditorToolbarAction, EditorToolbarActionDetail, HeadingLevel } from './types.js';
+/** Built-in text of `rc-editor-toolbar`. */
+export interface RCEditorToolbarMessages {
+    /** Accessible name of the toolbar. */
+    toolbar: string;
+    bold: string;
+    italic: string;
+    underline: string;
+    strikethrough: string;
+    inlineCode: string;
+    link: string;
+    headingLevel: string;
+    paragraph: string;
+    heading: (level: number, locale?: string) => string;
+    blockquote: string;
+    bulletList: string;
+    orderedList: string;
+    codeBlock: string;
+    codeBlockLanguage: string;
+    /** Placeholder of the code block language input. */
+    languagePlaceholder: string;
+    /** Tooltip of the code block language input. */
+    languageHint: string;
+    sourceMode: string;
+    /** Tooltip of the source mode button, before its shortcut. */
+    sourceModeHint: string;
+    /** A tooltip with its keyboard shortcut, such as `Bold (Ctrl+B)`. */
+    shortcut: (label: string, keys: string) => string;
+}
+export declare const DEFAULT_EDITOR_TOOLBAR_MESSAGES: Readonly<RCEditorToolbarMessages>;
+declare module '@rcarls/rc-common' {
+    interface RcMessageCatalog {
+        'rc-editor-toolbar': RCEditorToolbarMessages;
+    }
+}
 /**
- * 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.
+ * Formatting toolbar for `<rc-markdown-editor>`. Renders themed `rc-button` 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.
+ * `aria-pressed` on the corresponding buttons. Heading level is shown via a
+ * native `<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}
  *
+ * Built-in text follows the element's own `lang`, else `<html lang>`: per
+ * element through `messages`, or for every toolbar through
+ * `registerMessages()` from `@rcarls/rc-common` under `rc-editor-toolbar`.
+ *
  * @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.
@@ -30,8 +67,9 @@ import { EditorToolbarAction, EditorToolbarActionDetail, HeadingLevel } from './
  * @attr source-mode - Whether the parent editor is in source mode.
  */
 export declare class RcEditorToolbar extends LitElement {
-    /** Accessible label applied to the `rc-toolbar` container. */
-    label: string;
+    /** Built-in text overrides; unset keys fall back to registered text, then English. */
+    messages: Partial<RCEditorToolbarMessages> | undefined;
+    private readonly _messages;
     /** Whether Bold formatting is active at the cursor. */
     activeBold: boolean;
     /** Whether Italic formatting is active at the cursor. */

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

@@ -1,7 +1,29 @@
 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.js';
+interface MarkdownTree {
+    type: string;
+}
+/** Built-in text of `rc-markdown-editor`, apart from its toolbar's. */
+export interface RCMarkdownEditorMessages {
+    /** Accessible name of the source-mode textarea. */
+    source: string;
+    /** Accessible name of the link popover. */
+    linkPopover: string;
+    /** Accessible name of the link URL input. */
+    url: string;
+    applyLink: string;
+    openLink: string;
+    removeLink: string;
+    /** A tooltip with its keyboard shortcut, such as `Apply (Enter)`. */
+    shortcut: (label: string, keys: string) => string;
+}
+export declare const DEFAULT_MARKDOWN_EDITOR_MESSAGES: Readonly<RCMarkdownEditorMessages>;
+declare module '@rcarls/rc-common' {
+    interface RcMessageCatalog {
+        'rc-markdown-editor': RCMarkdownEditorMessages;
+    }
+}
 /**
  * Rich/source Markdown editor with a formatting toolbar, backed by rc-textarea.
  *
@@ -21,6 +43,12 @@ import { ActiveFormats, EditorMode, EditorToolbarAction, EditorToolbarActionDeta
  * </rc-markdown-editor>
  * ```
  *
+ * Built-in text follows the element's own `lang`, else `<html lang>`: per
+ * element through `messages`, or for every editor through
+ * `registerMessages()` from `@rcarls/rc-common` under `rc-markdown-editor`
+ * and, for the toolbar, `rc-editor-toolbar`. The toolbar takes the editor's
+ * `lang`.
+ *
  * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-markdown-editor rc-markdown-editor docs}
  *
  * @slot - Accepts a native `<textarea>` element (and optional `<label>`) for form wiring.
@@ -39,27 +67,58 @@ import { ActiveFormats, EditorMode, EditorToolbarAction, EditorToolbarActionDeta
  * @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
+ * @cssprop [--rc-markdown-editor-font-family=inherit] - Font family of the rich-text view
+ * @cssprop [--rc-markdown-editor-font-size=inherit] - Font size of the rich-text view
+ * @cssprop [--rc-markdown-editor-line-height=1.6] - Line height of the rich-text view
+ * @cssprop [--rc-markdown-editor-padding=0.75em 1em] - Padding inside the rich-text view
+ * @cssprop [--rc-markdown-editor-background=Canvas] - Background color of the rich-text view
+ * @cssprop [--rc-markdown-editor-color=CanvasText] - Text color of the rich-text view
+ * @cssprop [--rc-markdown-editor-border=1px solid ButtonBorder] - Border around the rich-text view
+ * @cssprop [--rc-markdown-editor-border-radius=0 0 4px 4px] - Border radius of the rich-text view
+ * @cssprop [--rc-markdown-editor-focus-outline=2px solid Highlight] - Focus ring outline on the rich-text view
+ * @cssprop [--rc-markdown-editor-src-font-family='Cascadia Code', 'Fira Code', ui-monospace, monospace] - Font family of the source editor
+ * @cssprop [--rc-markdown-editor-toolbar-gap=1px] - Gap between toolbar buttons
+ * @cssprop [--rc-markdown-editor-toolbar-padding=4px] - Padding inside the toolbar
+ * @cssprop [--rc-markdown-editor-toolbar-radius=4px 4px 0 0] - Toolbar border radius
+ * @cssprop [--rc-markdown-editor-toolbar-border=1px solid ButtonBorder] - Toolbar border
+ * @cssprop [--rc-markdown-editor-toolbar-background=Canvas] - Toolbar background
+ * @cssprop [--rc-markdown-editor-toolbar-color=CanvasText] - Toolbar text color
+ * @cssprop [--rc-markdown-editor-toolbar-button-size=2rem] - Minimum inline and block size of toolbar buttons
+ * @cssprop [--rc-markdown-editor-toolbar-button-background=transparent] - Toolbar button background
+ * @cssprop [--rc-markdown-editor-toolbar-button-color=ButtonText] - Toolbar button text color
+ * @cssprop [--rc-markdown-editor-toolbar-button-border=1px solid transparent] - Toolbar button border
+ * @cssprop [--rc-markdown-editor-toolbar-button-radius=3px] - Toolbar button border radius
+ * @cssprop [--rc-markdown-editor-toolbar-button-hover-opacity=0.08] - Toolbar button hover state-layer opacity
+ * @cssprop [--rc-markdown-editor-toolbar-button-focus-opacity=0.12] - Toolbar button focus state-layer opacity
+ * @cssprop [--rc-markdown-editor-toolbar-button-pressed-opacity=0.12] - Toolbar button pressed state-layer opacity
+ * @cssprop [--rc-markdown-editor-toolbar-button-active-background=Highlight] - Active toolbar button background
+ * @cssprop [--rc-markdown-editor-toolbar-button-active-color=HighlightText] - Active toolbar button text color
+ * @cssprop [--rc-markdown-editor-toolbar-button-active-border=1px solid Highlight] - Active toolbar button border
+ * @cssprop [--rc-markdown-editor-toolbar-focus-outline=2px solid Highlight] - Toolbar control focus outline
+ * @cssprop [--rc-markdown-editor-toolbar-focus-outline-offset=1px] - Toolbar control focus outline offset
+ * @cssprop [--rc-markdown-editor-toolbar-select-border=1px solid ButtonBorder] - Toolbar select border
+ * @cssprop [--rc-markdown-editor-toolbar-select-radius=3px] - Toolbar select border radius
+ * @cssprop [--rc-markdown-editor-toolbar-select-background=ButtonFace] - Toolbar select background
+ * @cssprop [--rc-markdown-editor-toolbar-select-color=ButtonText] - Toolbar select text color
+ * @cssprop [--rc-markdown-editor-toolbar-select-active-background=Highlight] - Active toolbar select background
+ * @cssprop [--rc-markdown-editor-toolbar-select-active-color=HighlightText] - Active toolbar select text color
+ * @cssprop [--rc-markdown-editor-toolbar-select-active-border-color=Highlight] - Active toolbar select border color
+ * @cssprop [--rc-markdown-editor-toolbar-input-border=1px solid ButtonBorder] - Toolbar input border
+ * @cssprop [--rc-markdown-editor-toolbar-input-radius=3px] - Toolbar input border radius
+ * @cssprop [--rc-markdown-editor-toolbar-input-background=Field] - Toolbar input background
+ * @cssprop [--rc-markdown-editor-toolbar-input-color=FieldText] - Toolbar input text color
+ * @cssprop [--rc-markdown-editor-src-heading-color=light-dark(#1d6fc4, #82b4f5)] - Source-mode heading token color
+ * @cssprop [--rc-markdown-editor-src-code-color=light-dark(#c94a1a, #f09060)] - Source-mode inline/fenced code token color
+ * @cssprop [--rc-markdown-editor-src-link-color=light-dark(#0370b0, #60b8e8)] - Source-mode link token color
+ * @cssprop [--rc-markdown-editor-src-blockquote-color=light-dark(#2d7a42, #70b880)] - Source-mode blockquote token color
+ * @cssprop [--rc-markdown-editor-src-list-color=light-dark(#7a5c0a, #d4ac48)] - Source-mode list marker token color
+ * @cssprop [--rc-markdown-editor-src-dim-color=GrayText] - Source-mode strikethrough token color
  */
 export declare class RcMarkdownEditor extends LitElement {
     static styles: import('lit').CSSResult;
+    /** Built-in text overrides; unset keys fall back to registered text, then English. */
+    messages: Partial<RCMarkdownEditorMessages> | undefined;
+    private readonly _messages;
     private _value;
     private _defaultValue;
     private _valueInitialized;
@@ -95,7 +154,7 @@ export declare class RcMarkdownEditor extends LitElement {
     protected _pluginApi: RCTextareaPluginAPI | null;
     protected _ignoreRichMutations: boolean;
     protected _richViewRendered: boolean;
-    protected _cachedTree: ReturnType<typeof fromMarkdown> | null;
+    protected _cachedTree: MarkdownTree | null;
     protected _renderedMode: EditorMode | null;
     protected _firstUpdatedDone: boolean;
     protected _$linkPopover?: HTMLDivElement;
@@ -106,7 +165,7 @@ export declare class RcMarkdownEditor extends LitElement {
     disconnectedCallback(): void;
     firstUpdated(): void;
     updated(changed: Map<string, unknown>): void;
-    render(): import('lit').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
     protected _setRichViewContent(markdown: string): void;
     protected _renderMarkdown(markdown: string): string;
     protected _scheduleMarkdownSync(): void;
@@ -114,7 +173,7 @@ export declare class RcMarkdownEditor extends LitElement {
     protected _switchToSource(): void;
     protected _switchToRich(): void;
     protected _setupSourcePlugin(): void;
-    protected _getCodeBlockLanguage(tree: ReturnType<typeof fromMarkdown>, offset: number): string | null;
+    protected _getCodeBlockLanguage(tree: MarkdownTree, offset: number): string | null;
     protected _onSourceChange: (_e: Event) => void;
     protected _onToolbarAction: (e: CustomEvent<EditorToolbarActionDetail>) => void;
     protected _applyRichFormat(action: EditorToolbarAction): void;
@@ -147,3 +206,4 @@ export declare class RcMarkdownEditor extends LitElement {
     protected _dispatchChange(value: string): void;
     protected _dispatchModeChange(mode: EditorMode): void;
 }
+export {};

package/package.json

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