@rcarls/rc-markdown-editor 0.0.0-next-20260921045401
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +181 -0
- package/README.md +20 -0
- package/dist/custom-elements.json +1543 -0
- package/dist/rc-editor-toolbar-5pUvT9Vm.js +5392 -0
- package/dist/rc-editor-toolbar-5pUvT9Vm.js.map +1 -0
- package/dist/rc-markdown-editor-define.js +5 -0
- package/dist/rc-markdown-editor-define.js.map +1 -0
- package/dist/rc-markdown-editor.js +6 -0
- package/dist/rc-markdown-editor.js.map +1 -0
- package/dist/types/packages/rc-markdown-editor/src/define.d.ts +0 -0
- package/dist/types/packages/rc-markdown-editor/src/formatting.d.ts +18 -0
- package/dist/types/packages/rc-markdown-editor/src/icons.d.ts +22 -0
- package/dist/types/packages/rc-markdown-editor/src/index.d.ts +3 -0
- package/dist/types/packages/rc-markdown-editor/src/rc-editor-toolbar.d.ts +75 -0
- package/dist/types/packages/rc-markdown-editor/src/rc-markdown-editor.d.ts +177 -0
- package/dist/types/packages/rc-markdown-editor/src/rc-markdown-editor.styles.d.ts +1 -0
- package/dist/types/packages/rc-markdown-editor/src/types.d.ts +42 -0
- package/package.json +75 -0
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import "@rcarls/rc-textarea/define";
|
|
2
|
+
import { R as o, a as t } from "./rc-editor-toolbar-5pUvT9Vm.js";
|
|
3
|
+
customElements.get("rc-editor-toolbar") ?? customElements.define("rc-editor-toolbar", o);
|
|
4
|
+
customElements.get("rc-markdown-editor") ?? customElements.define("rc-markdown-editor", t);
|
|
5
|
+
//# sourceMappingURL=rc-markdown-editor-define.js.map
|
|
@@ -0,0 +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;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-markdown-editor.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
File without changes
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Decoration } from '@rcarls/rc-textarea';
|
|
2
|
+
import { ActiveFormats } from './types.js';
|
|
3
|
+
/**
|
|
4
|
+
* Replaces the language token on the opening fence of the code block containing
|
|
5
|
+
* `selectionStart`. Returns the updated string, or `null` if the cursor is not
|
|
6
|
+
* inside a fenced code block.
|
|
7
|
+
*
|
|
8
|
+
* @param value - Full source editor value.
|
|
9
|
+
* @param selectionStart - Cursor offset used to locate the containing fence.
|
|
10
|
+
* @param language - Language string to write (empty string removes the token).
|
|
11
|
+
*/
|
|
12
|
+
export declare function setCodeBlockLanguage(value: string, selectionStart: number, language: string): string | null;
|
|
13
|
+
/**
|
|
14
|
+
* Derives active inline and block formats from the decoration array at a given
|
|
15
|
+
* selection range in the markdown source editor. Used for toolbar state sync in
|
|
16
|
+
* source mode.
|
|
17
|
+
*/
|
|
18
|
+
export declare function getFormatsFromDecorations(decorations: readonly Decoration[], start: number, end: number): Omit<ActiveFormats, 'codeLanguage'>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Bootstrap Icons v1.x (MIT) used for `<rc-editor-toolbar>`.
|
|
3
|
+
* Icons source: https://icons.getbootstrap.com/
|
|
4
|
+
* License: MIT — https://github.com/twbs/icons/blob/main/LICENSE
|
|
5
|
+
*
|
|
6
|
+
* All icons use `currentColor` so they inherit button text colour,
|
|
7
|
+
* including forced-colours mode. ViewBox is 0 0 16 16; rendered at
|
|
8
|
+
* 1em so they scale with the button's font-size.
|
|
9
|
+
*/
|
|
10
|
+
export declare const icons: {
|
|
11
|
+
bold: import('lit').TemplateResult<2>;
|
|
12
|
+
italic: import('lit').TemplateResult<2>;
|
|
13
|
+
underline: import('lit').TemplateResult<2>;
|
|
14
|
+
strikethrough: import('lit').TemplateResult<2>;
|
|
15
|
+
code: import('lit').TemplateResult<2>;
|
|
16
|
+
link: import('lit').TemplateResult<2>;
|
|
17
|
+
blockquote: import('lit').TemplateResult<2>;
|
|
18
|
+
bulletList: import('lit').TemplateResult<2>;
|
|
19
|
+
orderedList: import('lit').TemplateResult<2>;
|
|
20
|
+
codeBlock: import('lit').TemplateResult<2>;
|
|
21
|
+
source: import('lit').TemplateResult<2>;
|
|
22
|
+
};
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { LitElement, SVGTemplateResult, TemplateResult } from 'lit';
|
|
2
|
+
import { EditorToolbarAction, EditorToolbarActionDetail, HeadingLevel } from './types.js';
|
|
3
|
+
/**
|
|
4
|
+
* Formatting toolbar for `<rc-markdown-editor>`. Renders themed `rc-button`,
|
|
5
|
+
* `rc-select`, and `rc-toolbar` controls into its own light DOM so the parent
|
|
6
|
+
* editor can provide their shared appearance.
|
|
7
|
+
*
|
|
8
|
+
* Active-format properties are set by the parent editor and reflected as
|
|
9
|
+
* `aria-pressed` on the corresponding buttons. Heading level is shown via an
|
|
10
|
+
* `<rc-select>`. Code-block language is shown via a `<input>` when active.
|
|
11
|
+
*
|
|
12
|
+
* @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-markdown-editor rc-markdown-editor docs}
|
|
13
|
+
* @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ WAI-ARIA Toolbar pattern}
|
|
14
|
+
*
|
|
15
|
+
* @fires rc-toolbar-action - When a formatting button or select is activated.
|
|
16
|
+
*
|
|
17
|
+
* @attr label - Accessible label applied to the `rc-toolbar` container.
|
|
18
|
+
* @attr active-bold - Reflects Bold as active at the cursor.
|
|
19
|
+
* @attr active-italic - Reflects Italic as active at the cursor.
|
|
20
|
+
* @attr active-underline - Reflects Underline as active at the cursor.
|
|
21
|
+
* @attr active-strikethrough - Reflects Strikethrough as active at the cursor.
|
|
22
|
+
* @attr active-code - Reflects inline Code as active at the cursor.
|
|
23
|
+
* @attr active-link - Reflects Link as active at the cursor.
|
|
24
|
+
* @attr active-heading - Heading level active at the cursor, or absent for paragraph text.
|
|
25
|
+
* @attr active-blockquote - Reflects Blockquote as active at the cursor.
|
|
26
|
+
* @attr active-bullet-list - Reflects Bullet List as active at the cursor.
|
|
27
|
+
* @attr active-ordered-list - Reflects Ordered List as active at the cursor.
|
|
28
|
+
* @attr active-code-block - Reflects Code Block as active at the cursor.
|
|
29
|
+
* @attr code-language - Language of the code block at the cursor; absent when not in a code block.
|
|
30
|
+
* @attr source-mode - Whether the parent editor is in source mode.
|
|
31
|
+
*/
|
|
32
|
+
export declare class RcEditorToolbar extends LitElement {
|
|
33
|
+
/** Accessible label applied to the `rc-toolbar` container. */
|
|
34
|
+
label: string;
|
|
35
|
+
/** Whether Bold formatting is active at the cursor. */
|
|
36
|
+
activeBold: boolean;
|
|
37
|
+
/** Whether Italic formatting is active at the cursor. */
|
|
38
|
+
activeItalic: boolean;
|
|
39
|
+
/** Whether Underline formatting is active at the cursor. */
|
|
40
|
+
activeUnderline: boolean;
|
|
41
|
+
/** Whether Strikethrough formatting is active at the cursor. */
|
|
42
|
+
activeStrikethrough: boolean;
|
|
43
|
+
/** Whether inline Code formatting is active at the cursor. */
|
|
44
|
+
activeCode: boolean;
|
|
45
|
+
/** Whether the cursor is inside a Link. */
|
|
46
|
+
activeLink: boolean;
|
|
47
|
+
/** Heading level active at the cursor, or `null` for paragraph text. */
|
|
48
|
+
activeHeading: HeadingLevel | null;
|
|
49
|
+
/** Whether the cursor is inside a Blockquote. */
|
|
50
|
+
activeBlockquote: boolean;
|
|
51
|
+
/** Whether the cursor is inside a Bullet List. */
|
|
52
|
+
activeBulletList: boolean;
|
|
53
|
+
/** Whether the cursor is inside an Ordered List. */
|
|
54
|
+
activeOrderedList: boolean;
|
|
55
|
+
/** Whether the cursor is inside a Code Block. */
|
|
56
|
+
activeCodeBlock: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Language of the code block at the cursor. `null` means not in a code block
|
|
59
|
+
* (hides the language input). `''` means no language is set.
|
|
60
|
+
*/
|
|
61
|
+
codeLanguage: string | null;
|
|
62
|
+
/** Whether the editor is in source mode. */
|
|
63
|
+
sourceMode: boolean;
|
|
64
|
+
protected _langInputValue: string;
|
|
65
|
+
createRenderRoot(): HTMLElement;
|
|
66
|
+
updated(changed: Map<string, unknown>): void;
|
|
67
|
+
protected _dispatch(action: EditorToolbarAction, extra?: Partial<EditorToolbarActionDetail>): void;
|
|
68
|
+
protected _onClick: (e: MouseEvent) => void;
|
|
69
|
+
protected _onHeadingChange: (e: Event) => void;
|
|
70
|
+
protected _onLangInput: (e: Event) => void;
|
|
71
|
+
protected _onLangCommit: () => void;
|
|
72
|
+
protected _onLangKeyDown: (e: KeyboardEvent) => void;
|
|
73
|
+
protected _renderActionButton(action: EditorToolbarAction, label: string, title: string, active: boolean, icon: SVGTemplateResult): TemplateResult;
|
|
74
|
+
render(): TemplateResult<1>;
|
|
75
|
+
}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { fromMarkdown } from 'mdast-util-from-markdown';
|
|
3
|
+
import { RCTextarea, RCTextareaPluginAPI } from '@rcarls/rc-textarea';
|
|
4
|
+
import { ActiveFormats, EditorMode, EditorToolbarAction, EditorToolbarActionDetail, HeadingLevel } from './types.js';
|
|
5
|
+
/**
|
|
6
|
+
* Rich/source Markdown editor with a formatting toolbar, backed by rc-textarea.
|
|
7
|
+
*
|
|
8
|
+
* - **Rich mode (default)**: A `contenteditable` div shows micromark-rendered
|
|
9
|
+
* HTML. DOM mutations are converted back to markdown via turndown and
|
|
10
|
+
* written to the backing `<textarea>` for form participation.
|
|
11
|
+
* - **Source mode**: An `<rc-textarea>` instance shows the markdown source
|
|
12
|
+
* with live decorations. Toggle via `source-mode` attribute or Ctrl+Shift+S.
|
|
13
|
+
*
|
|
14
|
+
* Consumer markup follows the same progressive-enhancement contract as
|
|
15
|
+
* `<rc-textarea>`:
|
|
16
|
+
*
|
|
17
|
+
* ```html
|
|
18
|
+
* <rc-markdown-editor>
|
|
19
|
+
* <label for="body">Content</label>
|
|
20
|
+
* <textarea id="body" name="body"></textarea>
|
|
21
|
+
* </rc-markdown-editor>
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-markdown-editor rc-markdown-editor docs}
|
|
25
|
+
*
|
|
26
|
+
* @slot - Accepts a native `<textarea>` element (and optional `<label>`) for form wiring.
|
|
27
|
+
*
|
|
28
|
+
* @fires rc-change - Value changed. Detail: `{ value: string }`.
|
|
29
|
+
* @fires rc-mode-change - Mode toggled. Detail: `{ mode: EditorMode }`.
|
|
30
|
+
* @fires rc-formatting-change - Active formats at cursor changed. Detail: `ActiveFormats`.
|
|
31
|
+
*
|
|
32
|
+
* @csspart toolbar - The `<rc-editor-toolbar>` element.
|
|
33
|
+
* @csspart rich-view - The contenteditable rich-text view.
|
|
34
|
+
*
|
|
35
|
+
* @attr toolbar - Show the formatting toolbar.
|
|
36
|
+
* @attr source-mode - Controlled: show the markdown source editor.
|
|
37
|
+
* @attr default-source-mode - Uncontrolled initial source-mode state.
|
|
38
|
+
* @attr read-only - Make the editor read-only.
|
|
39
|
+
* @attr value - Current Markdown value.
|
|
40
|
+
* @attr default-value - Initial uncontrolled Markdown value.
|
|
41
|
+
*
|
|
42
|
+
* @cssprop [--rc-markdown-editor-font-family=inherit] - Font family of the rich-text view
|
|
43
|
+
* @cssprop [--rc-markdown-editor-font-size=inherit] - Font size of the rich-text view
|
|
44
|
+
* @cssprop [--rc-markdown-editor-line-height=1.6] - Line height of the rich-text view
|
|
45
|
+
* @cssprop [--rc-markdown-editor-padding=0.75em 1em] - Padding inside the rich-text view
|
|
46
|
+
* @cssprop [--rc-markdown-editor-background=Canvas] - Background color of the rich-text view
|
|
47
|
+
* @cssprop [--rc-markdown-editor-color=CanvasText] - Text color of the rich-text view
|
|
48
|
+
* @cssprop [--rc-markdown-editor-border=1px solid ButtonBorder] - Border around the rich-text view
|
|
49
|
+
* @cssprop [--rc-markdown-editor-border-radius=0 0 4px 4px] - Border radius of the rich-text view
|
|
50
|
+
* @cssprop [--rc-markdown-editor-focus-outline=2px solid Highlight] - Focus ring outline on the rich-text view
|
|
51
|
+
* @cssprop [--rc-markdown-editor-src-font-family='Cascadia Code', 'Fira Code', ui-monospace, monospace] - Font family of the source editor
|
|
52
|
+
* @cssprop [--rc-markdown-editor-toolbar-gap=1px] - Gap between toolbar buttons
|
|
53
|
+
* @cssprop [--rc-markdown-editor-toolbar-padding=4px] - Padding inside the toolbar
|
|
54
|
+
* @cssprop [--rc-markdown-editor-toolbar-radius=4px 4px 0 0] - Toolbar border radius
|
|
55
|
+
* @cssprop [--rc-markdown-editor-toolbar-border=1px solid ButtonBorder] - Toolbar border
|
|
56
|
+
* @cssprop [--rc-markdown-editor-toolbar-background=Canvas] - Toolbar background
|
|
57
|
+
* @cssprop [--rc-markdown-editor-toolbar-color=CanvasText] - Toolbar text color
|
|
58
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-size=2rem] - Minimum inline and block size of toolbar buttons
|
|
59
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-background=transparent] - Toolbar button background
|
|
60
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-color=ButtonText] - Toolbar button text color
|
|
61
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-border=1px solid transparent] - Toolbar button border
|
|
62
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-radius=3px] - Toolbar button border radius
|
|
63
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-hover-opacity=0.08] - Toolbar button hover state-layer opacity
|
|
64
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-focus-opacity=0.12] - Toolbar button focus state-layer opacity
|
|
65
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-pressed-opacity=0.12] - Toolbar button pressed state-layer opacity
|
|
66
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-active-background=Highlight] - Active toolbar button background
|
|
67
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-active-color=HighlightText] - Active toolbar button text color
|
|
68
|
+
* @cssprop [--rc-markdown-editor-toolbar-button-active-border=1px solid Highlight] - Active toolbar button border
|
|
69
|
+
* @cssprop [--rc-markdown-editor-toolbar-focus-outline=2px solid Highlight] - Toolbar control focus outline
|
|
70
|
+
* @cssprop [--rc-markdown-editor-toolbar-focus-outline-offset=1px] - Toolbar control focus outline offset
|
|
71
|
+
* @cssprop [--rc-markdown-editor-toolbar-select-border=1px solid ButtonBorder] - Toolbar select border
|
|
72
|
+
* @cssprop [--rc-markdown-editor-toolbar-select-radius=3px] - Toolbar select border radius
|
|
73
|
+
* @cssprop [--rc-markdown-editor-toolbar-select-background=ButtonFace] - Toolbar select background
|
|
74
|
+
* @cssprop [--rc-markdown-editor-toolbar-select-color=ButtonText] - Toolbar select text color
|
|
75
|
+
* @cssprop [--rc-markdown-editor-toolbar-select-active-background=Highlight] - Active toolbar select background
|
|
76
|
+
* @cssprop [--rc-markdown-editor-toolbar-select-active-color=HighlightText] - Active toolbar select text color
|
|
77
|
+
* @cssprop [--rc-markdown-editor-toolbar-select-active-border-color=Highlight] - Active toolbar select border color
|
|
78
|
+
* @cssprop [--rc-markdown-editor-toolbar-input-border=1px solid ButtonBorder] - Toolbar input border
|
|
79
|
+
* @cssprop [--rc-markdown-editor-toolbar-input-radius=3px] - Toolbar input border radius
|
|
80
|
+
* @cssprop [--rc-markdown-editor-toolbar-input-background=Field] - Toolbar input background
|
|
81
|
+
* @cssprop [--rc-markdown-editor-toolbar-input-color=FieldText] - Toolbar input text color
|
|
82
|
+
* @cssprop [--rc-markdown-editor-src-heading-color=light-dark(#1d6fc4, #82b4f5)] - Source-mode heading token color
|
|
83
|
+
* @cssprop [--rc-markdown-editor-src-code-color=light-dark(#c94a1a, #f09060)] - Source-mode inline/fenced code token color
|
|
84
|
+
* @cssprop [--rc-markdown-editor-src-link-color=light-dark(#0370b0, #60b8e8)] - Source-mode link token color
|
|
85
|
+
* @cssprop [--rc-markdown-editor-src-blockquote-color=light-dark(#2d7a42, #70b880)] - Source-mode blockquote token color
|
|
86
|
+
* @cssprop [--rc-markdown-editor-src-list-color=light-dark(#7a5c0a, #d4ac48)] - Source-mode list marker token color
|
|
87
|
+
* @cssprop [--rc-markdown-editor-src-dim-color=GrayText] - Source-mode strikethrough token color
|
|
88
|
+
*/
|
|
89
|
+
export declare class RcMarkdownEditor extends LitElement {
|
|
90
|
+
static styles: import('lit').CSSResult;
|
|
91
|
+
private _value;
|
|
92
|
+
private _defaultValue;
|
|
93
|
+
private _valueInitialized;
|
|
94
|
+
/** Initial uncontrolled Markdown value. */
|
|
95
|
+
get defaultValue(): string;
|
|
96
|
+
set defaultValue(v: string);
|
|
97
|
+
/** Current Markdown value. Host writes are silent. */
|
|
98
|
+
get value(): string;
|
|
99
|
+
set value(v: string);
|
|
100
|
+
private _sourceMode;
|
|
101
|
+
private _defaultSourceMode;
|
|
102
|
+
private _sourceModeInitialized;
|
|
103
|
+
/** Initial uncontrolled source-mode state. */
|
|
104
|
+
get defaultSourceMode(): boolean;
|
|
105
|
+
set defaultSourceMode(v: boolean);
|
|
106
|
+
/**
|
|
107
|
+
* Controlled: show the markdown source editor instead of the rich view.
|
|
108
|
+
* Host writes are silent; toolbar/keyboard toggles dispatch `rc-mode-change`.
|
|
109
|
+
*/
|
|
110
|
+
get sourceMode(): boolean;
|
|
111
|
+
set sourceMode(v: boolean);
|
|
112
|
+
/** Show the formatting toolbar. */
|
|
113
|
+
toolbar: boolean;
|
|
114
|
+
/** Make the editor read-only. */
|
|
115
|
+
readOnly: boolean;
|
|
116
|
+
protected _$richView: HTMLDivElement;
|
|
117
|
+
protected _$sourceEditor: RCTextarea;
|
|
118
|
+
protected _$toolbar?: HTMLElement;
|
|
119
|
+
protected _observer: MutationObserver | null;
|
|
120
|
+
protected _$savedRange: Range | null;
|
|
121
|
+
protected _activeFormats: ActiveFormats;
|
|
122
|
+
protected _syncTimer: ReturnType<typeof setTimeout> | null;
|
|
123
|
+
protected _pluginApi: RCTextareaPluginAPI | null;
|
|
124
|
+
protected _ignoreRichMutations: boolean;
|
|
125
|
+
protected _richViewRendered: boolean;
|
|
126
|
+
protected _cachedTree: ReturnType<typeof fromMarkdown> | null;
|
|
127
|
+
protected _renderedMode: EditorMode | null;
|
|
128
|
+
protected _firstUpdatedDone: boolean;
|
|
129
|
+
protected _$linkPopover?: HTMLDivElement;
|
|
130
|
+
protected _$linkPopoverInput?: HTMLInputElement;
|
|
131
|
+
protected _linkPopoverOpen: boolean;
|
|
132
|
+
protected _linkPopoverHref: string;
|
|
133
|
+
connectedCallback(): void;
|
|
134
|
+
disconnectedCallback(): void;
|
|
135
|
+
firstUpdated(): void;
|
|
136
|
+
updated(changed: Map<string, unknown>): void;
|
|
137
|
+
render(): import('lit').TemplateResult<1>;
|
|
138
|
+
protected _setRichViewContent(markdown: string): void;
|
|
139
|
+
protected _renderMarkdown(markdown: string): string;
|
|
140
|
+
protected _scheduleMarkdownSync(): void;
|
|
141
|
+
protected _syncMarkdownFromRichView(): void;
|
|
142
|
+
protected _switchToSource(): void;
|
|
143
|
+
protected _switchToRich(): void;
|
|
144
|
+
protected _setupSourcePlugin(): void;
|
|
145
|
+
protected _getCodeBlockLanguage(tree: ReturnType<typeof fromMarkdown>, offset: number): string | null;
|
|
146
|
+
protected _onSourceChange: (_e: Event) => void;
|
|
147
|
+
protected _onToolbarAction: (e: CustomEvent<EditorToolbarActionDetail>) => void;
|
|
148
|
+
protected _applyRichFormat(action: EditorToolbarAction): void;
|
|
149
|
+
protected _applySourceFormat(action: EditorToolbarAction): void;
|
|
150
|
+
/** Sets the heading level on the cursor's line in source mode. null = paragraph. */
|
|
151
|
+
protected _setSourceHeadingLevel(level: HeadingLevel | null): void;
|
|
152
|
+
/** Updates the language of the code block at the cursor in source mode. */
|
|
153
|
+
protected _setSourceCodeBlockLanguage(lang: string): void;
|
|
154
|
+
/** Updates the `data-lang` attribute on the `<pre>` at the cursor in rich mode. */
|
|
155
|
+
protected _setRichCodeBlockLanguage(lang: string): void;
|
|
156
|
+
/** Toggles a line prefix (e.g. `'> '`, `'- '`) on the cursor's line. */
|
|
157
|
+
protected _toggleLinePrefix(prefix: string): void;
|
|
158
|
+
/** Wraps the current selection (or cursor line) with a fenced code block. */
|
|
159
|
+
protected _toggleSourceCodeFence(): void;
|
|
160
|
+
protected _wrapRichSelection(tag: string): void;
|
|
161
|
+
protected _toggleRichCodeBlock(): void;
|
|
162
|
+
protected _onKeyDown: (e: KeyboardEvent) => void;
|
|
163
|
+
protected _onSelectionChange: () => void;
|
|
164
|
+
protected _pushToolbarState(): void;
|
|
165
|
+
protected _syncNativeTextarea(): void;
|
|
166
|
+
protected _connectLabel(): void;
|
|
167
|
+
protected _onRichViewClick: (e: MouseEvent) => void;
|
|
168
|
+
protected _onDocumentClick: (e: MouseEvent) => void;
|
|
169
|
+
protected _expandRichSelectionToWord(): void;
|
|
170
|
+
protected _positionLinkPopover(): void;
|
|
171
|
+
protected _applyLink: () => void;
|
|
172
|
+
protected _removeLink: () => void;
|
|
173
|
+
protected _openLinkHref: () => void;
|
|
174
|
+
protected _onLinkPopoverKeyDown: (e: KeyboardEvent) => void;
|
|
175
|
+
protected _dispatchChange(value: string): void;
|
|
176
|
+
protected _dispatchModeChange(mode: EditorMode): void;
|
|
177
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const rmeStyles: import('lit').CSSResult;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/** Actions dispatched by `<rc-editor-toolbar>` via the `rc-toolbar-action` event. */
|
|
2
|
+
export type EditorToolbarAction = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code' | 'link' | 'heading' | 'blockquote' | 'bullet-list' | 'ordered-list' | 'code-block' | 'code-block-language' | 'source';
|
|
3
|
+
/** Detail payload carried by `rc-toolbar-action` custom events. */
|
|
4
|
+
export interface EditorToolbarActionDetail {
|
|
5
|
+
action: EditorToolbarAction;
|
|
6
|
+
/** Heading level for `action === 'heading'`; null means paragraph. */
|
|
7
|
+
headingLevel?: HeadingLevel | null;
|
|
8
|
+
/** Language string for `action === 'code-block-language'`. */
|
|
9
|
+
codeLanguage?: string;
|
|
10
|
+
}
|
|
11
|
+
/** Heading level active at the current cursor position. */
|
|
12
|
+
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
13
|
+
/** Inline and block formatting state at the current cursor position or selection. */
|
|
14
|
+
export interface ActiveFormats {
|
|
15
|
+
bold?: boolean;
|
|
16
|
+
italic?: boolean;
|
|
17
|
+
underline?: boolean;
|
|
18
|
+
strikethrough?: boolean;
|
|
19
|
+
code?: boolean;
|
|
20
|
+
link?: boolean;
|
|
21
|
+
heading?: HeadingLevel | null;
|
|
22
|
+
blockquote?: boolean;
|
|
23
|
+
bulletList?: boolean;
|
|
24
|
+
orderedList?: boolean;
|
|
25
|
+
codeBlock?: boolean;
|
|
26
|
+
/** Language of the code block at the cursor, or null if none / not in a code block. */
|
|
27
|
+
codeLanguage?: string | null;
|
|
28
|
+
}
|
|
29
|
+
/** Editor display mode. */
|
|
30
|
+
export type EditorMode = 'rich' | 'source';
|
|
31
|
+
declare global {
|
|
32
|
+
interface HTMLElementEventMap {
|
|
33
|
+
'rc-toolbar-action': CustomEvent<EditorToolbarActionDetail>;
|
|
34
|
+
'rc-change': CustomEvent<{
|
|
35
|
+
value: string;
|
|
36
|
+
}>;
|
|
37
|
+
'rc-mode-change': CustomEvent<{
|
|
38
|
+
mode: EditorMode;
|
|
39
|
+
}>;
|
|
40
|
+
'rc-formatting-change': CustomEvent<ActiveFormats>;
|
|
41
|
+
}
|
|
42
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@rcarls/rc-markdown-editor",
|
|
3
|
+
"publishConfig": {
|
|
4
|
+
"access": "public"
|
|
5
|
+
},
|
|
6
|
+
"version": "0.0.0-next-20260921045401",
|
|
7
|
+
"description": "Rich/source Markdown editor with a formatting toolbar, backed by rc-textarea.",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/richardcarls/rc-webcomponents.git",
|
|
11
|
+
"directory": "packages/rc-markdown-editor"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-markdown-editor",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"type": "module",
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"module": "./dist/rc-markdown-editor.js",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"import": {
|
|
23
|
+
"types": "./dist/types/packages/rc-markdown-editor/src/index.d.ts",
|
|
24
|
+
"default": "./dist/rc-markdown-editor.js"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"./define": {
|
|
28
|
+
"import": {
|
|
29
|
+
"types": "./dist/types/packages/rc-markdown-editor/src/define.d.ts",
|
|
30
|
+
"default": "./dist/rc-markdown-editor-define.js"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"types": "./dist/types/packages/rc-markdown-editor/src/index.d.ts",
|
|
35
|
+
"sideEffects": [
|
|
36
|
+
"./dist/rc-markdown-editor-define.js"
|
|
37
|
+
],
|
|
38
|
+
"customElements": "dist/custom-elements.json",
|
|
39
|
+
"scripts": {
|
|
40
|
+
"build": "tsc && vite build && cem analyze",
|
|
41
|
+
"cem:analyze": "cem analyze",
|
|
42
|
+
"preview": "vite preview",
|
|
43
|
+
"test:browser": "vitest --run",
|
|
44
|
+
"test:browser:chrome": "vitest --run --project=chromium",
|
|
45
|
+
"test:browser:firefox": "vitest --run --project=firefox"
|
|
46
|
+
},
|
|
47
|
+
"dependencies": {
|
|
48
|
+
"@rcarls/rc-button": "0.0.0-next-20260921045401",
|
|
49
|
+
"@rcarls/rc-select": "0.0.0-next-20260921045401",
|
|
50
|
+
"@rcarls/rc-textarea": "0.0.0-next-20260921045401",
|
|
51
|
+
"@rcarls/rc-toolbar": "0.0.0-next-20260921045401"
|
|
52
|
+
},
|
|
53
|
+
"devDependencies": {
|
|
54
|
+
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
55
|
+
"@types/turndown": "^5.0.5",
|
|
56
|
+
"@vitest/browser-playwright": "4.1.5",
|
|
57
|
+
"lit": "^3.0.0",
|
|
58
|
+
"mdast-util-from-markdown": "^2.0.2",
|
|
59
|
+
"mdast-util-gfm-strikethrough": "^2.0.0",
|
|
60
|
+
"micromark": "^4.0.2",
|
|
61
|
+
"micromark-extension-gfm-strikethrough": "^2.0.0",
|
|
62
|
+
"playwright": "^1.56.0",
|
|
63
|
+
"rollup": "^4.60.2",
|
|
64
|
+
"turndown": "^7.2.0",
|
|
65
|
+
"typescript": "~5.9.3",
|
|
66
|
+
"unist-util-visit": "^5.0.0",
|
|
67
|
+
"vite": "^7.1.7",
|
|
68
|
+
"vite-plugin-dts": "^4.5.4",
|
|
69
|
+
"vitest": "^4.0.6",
|
|
70
|
+
"vitest-browser-lit": "^1.0.1"
|
|
71
|
+
},
|
|
72
|
+
"peerDependencies": {
|
|
73
|
+
"lit": "^3.0.0"
|
|
74
|
+
}
|
|
75
|
+
}
|