@sps-woodland/rich-text-editor 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/rich-text-editor](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/rich-text-editor#readme)
+
+SPS Woodland Design System rich text editor component

package/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

package/lib/RTELinkModal.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+import type { SelectionDOMContextFind } from "./hooks/useRTESelectionListener";
+export interface LinkConfig {
+    text: string;
+    link: string;
+}
+export declare function RTELinkModal({ onClose, selectionDOMContextFind, selectionRange, }: ComponentProps<{
+    onClose: (range?: Range, config?: LinkConfig) => void;
+    selectionDOMContextFind: SelectionDOMContextFind;
+    selectionRange?: Range;
+}>): React.ReactElement;

package/lib/RichTextEditor.css.d.ts

@@ -0,0 +1,14 @@
+export declare const richTextEditor: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    disabled: {
+        true: {
+            borderColor: string;
+        };
+        false: {
+            borderColor: string;
+        };
+    };
+}>;
+export declare type RichTextEditorVariants = Required<Parameters<typeof richTextEditor>>[0];
+export declare const rteEditableDiv: typeof richTextEditor;
+export declare const rteToolbar: string;
+export declare const vr: string;

package/lib/RichTextEditor.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "@sps-woodland/core";
+import * as React from "react";
+import type { RichTextEditorAggregateValue } from "./hooks/useRTEContent";
+import type { RichTextEditorVariants } from "./RichTextEditor.css";
+export declare function RichTextEditor({ className, md: mdProp, html: htmlProp, disabled, onChange, ...rest }: ComponentProps<RichTextEditorVariants & Partial<RichTextEditorAggregateValue> & {
+    onChange?: (newValue: RichTextEditorAggregateValue) => void;
+}, HTMLDivElement>): React.ReactElement;

package/lib/RichTextEditorExamples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const RichTextEditorExamples: ComponentManifestEntry;

package/lib/hooks/useHtmlToMd.d.ts

@@ -0,0 +1 @@
+export declare function useHtmlToMd(): (html: string) => Promise<string>;

package/lib/hooks/useMdToHtml.d.ts

@@ -0,0 +1 @@
+export declare function useMdToHtml(): (md: string) => Promise<string>;

package/lib/hooks/useRTEContent.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from "react";
+export interface RichTextEditorAggregateValue {
+    md: string;
+    html: string;
+}
+export declare type RTEStateUpdateFromDiv = <T extends HTMLElement>(ref: RefObject<T>) => void;
+export declare function useRTEContent(initMd?: string, initHtml?: string): {
+    aggValue?: RichTextEditorAggregateValue;
+    editableDivInnerHtml: {
+        html: string;
+    };
+    updateStateFromDiv: RTEStateUpdateFromDiv;
+};

package/lib/hooks/useRTEObserver.d.ts

@@ -0,0 +1,5 @@
+import type { RefObject } from "react";
+import type { RTEStateUpdateFromDiv } from "./useRTEContent";
+export declare function moveCaretAfter(node: Node): void;
+export declare function moveCaretBefore(node: Node): void;
+export declare function useRTEObserver(updateStateFromDiv: RTEStateUpdateFromDiv): RefObject<HTMLDivElement>;

package/lib/hooks/useRTESelectionListener.d.ts

@@ -0,0 +1,6 @@
+export declare type ElementTest = (element: HTMLElement) => boolean;
+export declare type SelectionDOMContextFind = (test?: ElementTest) => HTMLElement | null;
+export declare function useRTESelectionListener(editableDivRef: any): {
+    selectionRange: Range | undefined;
+    selectionDOMContextFind: SelectionDOMContextFind;
+};

package/lib/hooks/useRTEToolbarButtons.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from "react";
+import type { RTEToolbarButton } from "../toolbar-button/RTEToolbarButton";
+import type { LinkConfig } from "../RTELinkModal";
+import type { SelectionDOMContextFind } from "./useRTESelectionListener";
+declare type ToolbarButtonProps = Parameters<typeof RTEToolbarButton>[0] & {
+    key: string;
+};
+declare type ToolbarButtonPartialProps = Omit<ToolbarButtonProps, "selectionDOMContextFind">;
+export declare function useRTEToolbarButtons(selectionDOMContextFind: SelectionDOMContextFind, editableDivRef: RefObject<HTMLDivElement>): {
+    toolbarButtons: (ToolbarButtonPartialProps | "vr")[];
+    showLinkModal: boolean;
+    handleLinkModalClose: (range: Range, config?: LinkConfig) => void;
+};
+export {};

package/lib/icons/index.d.ts

@@ -0,0 +1,11 @@
+import bold from "./BOLD.svg";
+import indent from "./INDENT.svg";
+import italics from "./ITALICS.svg";
+import link from "./LINK.svg";
+import orderedList from "./ORDERED_LIST.svg";
+import outdent from "./OUTDENT.svg";
+import redo from "./REDO.svg";
+import undo from "./UNDO.svg";
+import unlink from "./UNLINK.svg";
+import unorderedList from "./UNORDERED_LIST.svg";
+export { bold, indent, italics, link, orderedList, outdent, redo, undo, unlink, unorderedList, };