@lapismd/mira-react 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @lapismd/mira-react
+
+## 0.0.1
+
+### Patch Changes
+
+- Initial public release.

package/LICENSE.md

@@ -0,0 +1,4 @@
+AGPL-3.0-or-later
+
+This project is licensed under the GNU Affero General Public License v3.0 or later.
+See <https://www.gnu.org/licenses/agpl-3.0.en.html>.

package/README.md

@@ -0,0 +1,30 @@
+# @lapismd/mira-react
+
+React components for Mira.
+
+```tsx
+import { useState } from "react";
+import { MiraEditor } from "@lapismd/mira-react";
+import "@lapismd/mira-react/styles.css";
+
+export function Editor() {
+  const [value, setValue] = useState("# Hello");
+
+  return (
+    <MiraEditor
+      value={value}
+      defaultEditMode="live-preview"
+      onChange={setValue}
+      features={{ mermaid: true, "split-mode": true }}
+    />
+  );
+}
+```
+
+Exports:
+
+- `Mira`: composable editor component.
+- `MiraEditor`: batteries-included editor plus toolbar.
+- `MiraEditorToolbar`: standalone toolbar for custom shells.
+
+Imperative DOM factories live in `@lapismd/mira-vanilla`.

package/dist/index.d.ts

@@ -0,0 +1,280 @@
+import * as react from 'react';
+import { ComponentType } from 'react';
+import { MiraMarkdownActionId, MiraEditorSelection } from '@lapismd/mira/core';
+export { MiraMarkdownActionId } from '@lapismd/mira/core';
+import * as _lapismd_mira_extensions from '@lapismd/mira/extensions';
+import { MiraMode, MiraExtension, MiraBlockControlsOptions, MiraTheme, MiraColorMode, MiraLinkResolver, MiraAssetResolver, MiraFileAdapter, MiraImageConfig, MiraMarkdownAuthoringConfig, MiraCommand, MiraTemplateSelection, MiraToolbarPlacement, MiraMarkdownBlockRange, MiraMarkdownBlockHandle, MiraTextRange, MiraBlockToolbarConfig } from '@lapismd/mira/extensions';
+import { MiraEditorSlashCommandConfig } from '@lapismd/mira-editor';
+export { MiraEditorSlashCommandConfig, MiraEditorSlashCommandId } from '@lapismd/mira-editor';
+import { FrontmatterConfig, MarkdownOutlineVariant } from '@lapismd/mira/preview';
+import * as _lapismd_mira from '@lapismd/mira';
+
+type MiraFrontmatterConfig = FrontmatterConfig;
+type MiraOutlineVariant = MarkdownOutlineVariant;
+type MiraReactIcon = ComponentType<{
+    "aria-hidden"?: boolean | "true" | "false";
+    className?: string;
+}>;
+type MiraEditorEditMode = Extract<MiraMode, "live-preview" | "source">;
+type MiraHandle = {
+    applyMarkdownAction: (action: MiraMarkdownActionId) => boolean;
+    executeCommand: (commandId: string) => boolean;
+    focus: () => void;
+    getCommands: () => readonly MiraCommand[];
+    getMarkdown: () => string;
+    getMode: () => MiraMode;
+    getSelection: () => MiraEditorSelection | null;
+    insertImage: () => void;
+    insertMarkdown: (markdown: string, selection?: MiraTemplateSelection) => void;
+    isCommandEnabled: (commandId: string) => boolean;
+    setMarkdown: (markdown: string) => void;
+    setMode: (mode: MiraMode) => void;
+    setReadonly: (readonly: boolean) => void;
+    setSelection: (selection: MiraEditorSelection) => void;
+};
+type MiraProps = {
+    value?: string;
+    defaultValue?: string;
+    mode?: MiraMode;
+    defaultMode?: MiraMode;
+    extensions?: MiraExtension[];
+    readonly?: boolean;
+    defaultReadonly?: boolean;
+    placeholder?: string;
+    lineWrapping?: boolean;
+    spellcheck?: boolean;
+    blockControls?: boolean | MiraBlockControlsOptions;
+    indentGuides?: boolean;
+    indentWithTabs?: boolean;
+    indentWidth?: number;
+    theme?: MiraTheme;
+    colorMode?: MiraColorMode;
+    sourcePath?: string;
+    className?: string;
+    toolbar?: boolean;
+    linkResolver?: MiraLinkResolver;
+    assetResolver?: MiraAssetResolver;
+    fileAdapter?: MiraFileAdapter;
+    imageConfig?: MiraImageConfig;
+    authoring?: MiraMarkdownAuthoringConfig;
+    frontmatterOpen?: boolean;
+    frontmatterConfig?: MiraFrontmatterConfig;
+    headingIds?: boolean;
+    headingIdPrefix?: string;
+    htmlPolicy?: "trusted" | "safe";
+    emoji?: boolean;
+    outline?: boolean;
+    outlineVariant?: MiraOutlineVariant;
+    onChange?: (value: string) => void;
+    onModeChange?: (mode: MiraMode) => void;
+    onReadonlyChange?: (readonly: boolean) => void;
+    onFrontmatterChange?: (nextYaml: string, nextValue: string) => void;
+};
+type MiraFeatureName = "toolbar" | "mode-switch" | "formatting" | "headings" | "lists" | "links" | "tables" | "grid-tables" | "mermaid" | "code" | "math" | "frontmatter" | "images" | "embeds" | "wikilinks" | "tags" | "slash-commands" | "block-controls" | "source-mode" | "live-preview-mode" | "preview-mode" | "split-mode";
+type MiraFeatureFlags = Partial<Record<MiraFeatureName, boolean>>;
+type ResolvedMiraEditorFeatures = Record<MiraFeatureName, boolean>;
+type MiraEditorToolbarItem = "heading" | "bold" | "italic" | "strikethrough" | "inlineCode" | "quote" | "bulletList" | "numberedList" | "taskList" | "link" | "image" | "table" | "gridTable" | "code" | "math" | "mermaid";
+type MiraEditorToolbarActionContext = {
+    value: string;
+    mode: MiraMode;
+    readonly: boolean;
+    applyMarkdownAction?: (action: MiraMarkdownActionId) => boolean;
+    focus: () => void;
+    getIndentGuides?: () => boolean;
+    getIndentWidth?: () => number;
+    getIndentWithTabs?: () => boolean;
+    getMarkdown: () => string;
+    getMode: () => MiraMode;
+    getSelection: () => MiraEditorSelection | null;
+    insertImage: () => void;
+    insertMarkdown: (markdown: string) => void;
+    setIndentGuides?: (enabled: boolean) => void;
+    setIndentWidth?: (width: number) => void;
+    setIndentWithTabs?: (enabled: boolean) => void;
+    setMarkdown: (markdown: string) => void;
+    setMode: (mode: MiraMode) => void;
+    setReadonly: (readonly: boolean) => void;
+    setSelection: (selection: MiraEditorSelection) => void;
+    block?: MiraMarkdownBlockRange;
+    blocks?: MiraMarkdownBlockRange[];
+    handle?: MiraMarkdownBlockHandle;
+    affectedRange?: MiraMarkdownBlockRange;
+    replaceRange?: (markdown: string, range: MiraTextRange, selection?: MiraTemplateSelection) => void;
+};
+type MiraEditorToolbarPlacement = MiraToolbarPlacement;
+type MiraEditorToolbarDynamicBoolean = boolean | ((context: MiraEditorToolbarActionContext) => boolean);
+type MiraEditorToolbarMenuAction = {
+    type?: "item";
+    id: string;
+    label: string;
+    icon?: MiraReactIcon;
+    shortcut?: string;
+    checked?: MiraEditorToolbarDynamicBoolean;
+    disabled?: MiraEditorToolbarDynamicBoolean;
+    run: (context: MiraEditorToolbarActionContext) => void;
+};
+type MiraEditorToolbarMenuLabel = {
+    type: "label";
+    id?: string;
+    label: string;
+};
+type MiraEditorToolbarMenuSeparator = {
+    type: "separator";
+    id?: string;
+};
+type MiraEditorToolbarMenuItem = MiraEditorToolbarMenuAction | MiraEditorToolbarMenuLabel | MiraEditorToolbarMenuSeparator;
+type MiraEditorToolbarButtonAction = {
+    type?: "button";
+    id: string;
+    label: string;
+    icon: MiraReactIcon;
+    group?: string;
+    placements?: readonly MiraEditorToolbarPlacement[];
+    shortcut?: string;
+    tooltip?: string;
+    disabled?: MiraEditorToolbarDynamicBoolean;
+    pressed?: MiraEditorToolbarDynamicBoolean;
+    run: (context: MiraEditorToolbarActionContext) => void;
+};
+type MiraEditorToolbarDropdownAction = {
+    type: "dropdown";
+    id: string;
+    label: string;
+    icon: MiraReactIcon;
+    tooltip?: string;
+    disabled?: MiraEditorToolbarDynamicBoolean;
+    items: MiraEditorToolbarMenuItem[];
+};
+type MiraEditorToolbarAction = MiraEditorToolbarButtonAction | MiraEditorToolbarDropdownAction;
+type MiraEditorToolbarDefinition = {
+    id: string;
+    label?: string;
+    align?: "start" | "end";
+    items: MiraEditorToolbarAction[];
+};
+type MiraEditorToolbarConfig = {
+    items?: MiraEditorToolbarItem[];
+    actions?: MiraEditorToolbarAction[];
+    toolbars?: MiraEditorToolbarDefinition[];
+};
+type MiraEditorMermaidConfig = {
+    enabled?: boolean;
+};
+type MiraEditorBlockControlsConfig = {
+    enabled?: boolean;
+    toolbar?: boolean | MiraBlockToolbarConfig;
+};
+type MiraEditorFeatureConfigs = {
+    toolbar?: MiraEditorToolbarConfig;
+    mermaid?: MiraEditorMermaidConfig;
+    "block-controls"?: MiraEditorBlockControlsConfig;
+    "slash-commands"?: MiraEditorSlashCommandConfig;
+};
+
+type MiraEditorToolbarProps = {
+    value?: string;
+    mode?: MiraMode;
+    defaultEditMode?: MiraEditorEditMode;
+    readonly?: boolean;
+    className?: string;
+    features?: MiraFeatureFlags;
+    featureConfigs?: MiraEditorFeatureConfigs;
+    toolbarActions?: MiraEditorToolbarAction[];
+    toolbars?: MiraEditorToolbarDefinition[];
+    modeOptions?: MiraMode[];
+    showModeSwitch?: boolean;
+    indentGuides?: boolean;
+    indentWithTabs?: boolean;
+    indentWidth?: number;
+    context?: MiraEditorToolbarActionContext;
+    onModeChange?: (mode: MiraMode) => void;
+    onInsertMarkdown?: (markdown: string) => void;
+    onInsertImage?: () => void;
+    onIndentGuidesChange?: (enabled: boolean) => void;
+    onIndentWidthChange?: (width: number) => void;
+    onIndentWithTabsChange?: (enabled: boolean) => void;
+};
+type MiraEditorProps = Omit<MiraProps, "toolbar"> & {
+    defaultEditMode?: MiraEditorEditMode;
+    editorClassName?: string;
+    features?: MiraFeatureFlags;
+    featureConfigs?: MiraEditorFeatureConfigs;
+    toolbarActions?: MiraEditorToolbarAction[];
+    toolbars?: MiraEditorToolbarDefinition[];
+    onIndentGuidesChange?: (enabled: boolean) => void;
+    onIndentWidthChange?: (width: number) => void;
+    onIndentWithTabsChange?: (enabled: boolean) => void;
+};
+type MiraEditorHandle = MiraHandle;
+
+declare const Mira: react.ForwardRefExoticComponent<MiraProps & react.RefAttributes<MiraHandle>>;
+
+declare const MiraEditor: react.ForwardRefExoticComponent<Omit<MiraProps, "toolbar"> & {
+    defaultEditMode?: MiraEditorEditMode;
+    editorClassName?: string;
+    features?: MiraFeatureFlags;
+    featureConfigs?: MiraEditorFeatureConfigs;
+    toolbarActions?: MiraEditorToolbarAction[];
+    toolbars?: MiraEditorToolbarDefinition[];
+    onIndentGuidesChange?: (enabled: boolean) => void;
+    onIndentWidthChange?: (width: number) => void;
+    onIndentWithTabsChange?: (enabled: boolean) => void;
+} & react.RefAttributes<MiraHandle>>;
+
+declare function MiraEditorToolbar({ className, context, defaultEditMode, featureConfigs, features, indentGuides, indentWithTabs, indentWidth, mode, modeOptions: modeOptionsProp, onIndentGuidesChange, onIndentWidthChange, onIndentWithTabsChange, onInsertMarkdown, onInsertImage, onModeChange, readonly, showModeSwitch, toolbarActions, toolbars, value, }: MiraEditorToolbarProps): React.ReactElement;
+
+declare const MiraFeature: {
+    readonly Toolbar: "toolbar";
+    readonly ModeSwitch: "mode-switch";
+    readonly Formatting: "formatting";
+    readonly Headings: "headings";
+    readonly Lists: "lists";
+    readonly Links: "links";
+    readonly Tables: "tables";
+    readonly GridTables: "grid-tables";
+    readonly Mermaid: "mermaid";
+    readonly Code: "code";
+    readonly Math: "math";
+    readonly Frontmatter: "frontmatter";
+    readonly Images: "images";
+    readonly Embeds: "embeds";
+    readonly Wikilinks: "wikilinks";
+    readonly Tags: "tags";
+    readonly SlashCommands: "slash-commands";
+    readonly BlockControls: "block-controls";
+    readonly SourceMode: "source-mode";
+    readonly LivePreviewMode: "live-preview-mode";
+    readonly PreviewMode: "preview-mode";
+    readonly SplitMode: "split-mode";
+};
+declare const defaultMiraEditorFeatures: ResolvedMiraEditorFeatures;
+declare const defaultMiraEditorEditMode: MiraEditorEditMode;
+declare function resolveMiraEditorFeatures(features?: MiraFeatureFlags): ResolvedMiraEditorFeatures;
+declare function resolveMiraEditorBlockControls(options?: {
+    featureConfigs?: MiraEditorFeatureConfigs;
+    features?: MiraFeatureFlags;
+}): boolean | _lapismd_mira.MiraBlockControlsOptions;
+declare function createMiraEditorExtensions({ featureConfigs, features, }?: {
+    featureConfigs?: MiraEditorFeatureConfigs;
+    features?: MiraFeatureFlags;
+}): MiraExtension[];
+declare function resolveMiraEditorSlashCommands({ featureConfigs, features, }?: {
+    featureConfigs?: MiraEditorFeatureConfigs;
+    features?: MiraFeatureFlags;
+}): _lapismd_mira_extensions.MiraSlashCommand[];
+declare function resolveMiraEditorToolbarItems({ featureConfigs, features, }?: {
+    featureConfigs?: MiraEditorFeatureConfigs;
+    features?: MiraFeatureFlags;
+}): MiraEditorToolbarItem[];
+declare function resolveMiraEditorToolbarActions({ featureConfigs, toolbarActions, }?: {
+    featureConfigs?: MiraEditorFeatureConfigs;
+    toolbarActions?: MiraEditorToolbarAction[];
+}): MiraEditorToolbarAction[];
+declare function resolveMiraEditorToolbarDefinitions({ featureConfigs, toolbars, }?: {
+    featureConfigs?: MiraEditorFeatureConfigs;
+    toolbars?: MiraEditorToolbarDefinition[];
+}): MiraEditorToolbarDefinition[];
+declare function resolveMiraEditorModes(features?: MiraFeatureFlags): MiraMode[];
+declare function resolveMiraEditorEditMode(defaultEditMode?: MiraEditorEditMode, modeOptions?: MiraMode[]): MiraEditorEditMode;
+
+export { Mira, MiraEditor, type MiraEditorBlockControlsConfig, type MiraEditorEditMode, type MiraEditorFeatureConfigs, type MiraEditorHandle, type MiraEditorMermaidConfig, type MiraEditorProps, MiraEditorToolbar, type MiraEditorToolbarAction, type MiraEditorToolbarActionContext, type MiraEditorToolbarButtonAction, type MiraEditorToolbarConfig, type MiraEditorToolbarDefinition, type MiraEditorToolbarDropdownAction, type MiraEditorToolbarItem, type MiraEditorToolbarMenuAction, type MiraEditorToolbarMenuItem, type MiraEditorToolbarMenuLabel, type MiraEditorToolbarMenuSeparator, type MiraEditorToolbarPlacement, type MiraEditorToolbarProps, MiraFeature, type MiraFeatureFlags, type MiraFeatureName, type MiraFrontmatterConfig, type MiraHandle, type MiraOutlineVariant, type MiraProps, type MiraReactIcon, type ResolvedMiraEditorFeatures, createMiraEditorExtensions, Mira as default, defaultMiraEditorEditMode, defaultMiraEditorFeatures, resolveMiraEditorBlockControls, resolveMiraEditorEditMode, resolveMiraEditorFeatures, resolveMiraEditorModes, resolveMiraEditorSlashCommands, resolveMiraEditorToolbarActions, resolveMiraEditorToolbarDefinitions, resolveMiraEditorToolbarItems };