@equinor/amplify-component-lib 0.0.1 → 8.0.0

package/dist/molecules/RichTextEditor/MenuBar/MenuBar.styles.js

@@ -0,0 +1,42 @@
+import{tokens as r}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import o from"styled-components";const{colors:t,spacings:i,shape:s}=r,e=o.section`
+  display: flex;
+  > button:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+  > button:first-child {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+  > button:last-child {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+`,a=o.button`
+  display: flex;
+  align-items: center;
+  border-radius: ${s.button.borderRadius};
+  padding: ${i.comfortable.x_small};
+  color: ${r=>l(r)};
+  background: ${r=>n(r)};
+  transition: 200ms;
+  > svg {
+    fill: ${r=>l(r)};
+    transition: 200ms fill;
+  }
+
+  &:hover:not(:disabled) {
+    background: ${r=>b(r)};
+    color: ${r=>d(r)};
+    > svg {
+      fill: ${r=>d(r)};
+    }
+  }
+
+  &:hover:disabled {
+    cursor: not-allowed;
+  }
+
+  &:disabled > svg {
+    fill: ${t.interactive.disabled__text.rgba};
+  }
+`,l=r=>r.$customColors?r.$customColors.resting:r.$active?t.ui.background__light.rgba:t.interactive.primary__resting.rgba,d=r=>r.$customColors?r.$customColors.hover:t.interactive.primary__hover.rgba,n=r=>r.$active?t.interactive.primary__resting.rgba:t.ui.background__light.rgba,b=r=>r.$customColors?r.$customColors.backgroundHover:t.interactive.primary__hover_alt.rgba;export{a as MenuButtonStyle,e as MenuSection};

package/dist/molecules/RichTextEditor/MenuBar/MenuButton.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, RefObject } from 'react';
+import { IconData } from '@equinor/eds-icons';
+export interface MenuButtonProps {
+    ref?: RefObject<HTMLButtonElement>;
+    children?: ReactNode;
+    icon: IconData;
+    onClick: () => void;
+    active?: boolean;
+    disabled?: boolean;
+    tooltip?: string;
+    customColors?: {
+        resting: string;
+        hover: string;
+        backgroundHover: string;
+    };
+}
+export declare const MenuButton: import("react").ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/molecules/RichTextEditor/MenuBar/MenuButton.js

@@ -0,0 +1 @@
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Icon as i}from"@equinor/eds-core-react";import{MenuButtonStyle as r}from"./MenuBar.styles.js";import{OptionalTooltip as l}from"../../OptionalTooltip/OptionalTooltip.js";const c=e((({icon:e,onClick:c,customColors:m,active:n=!1,disabled:a=!1,tooltip:p,children:s,...d},u)=>o(l,{title:p,placement:"bottom",children:t(r,{ref:u,$active:n,$customColors:m,onClick:c,disabled:a,type:"button",...d,children:[o(i,{data:e}),s]})})));c.displayName="MenuButton";export{c as MenuButton};

package/dist/molecules/RichTextEditor/MenuBar/Table/Table.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../../RichTextEditor.types';
+export declare const TextTable: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/Table/Table.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{table_chart as o}from"@equinor/eds-icons";import{RichTextEditorFeatures as e}from"../../RichTextEditor.types.js";import{MenuButton as r}from"../MenuButton.js";const i=({editor:i,features:s})=>{if((!s||s.includes(e.TABLE))&&!i.isActive("table"))return t(r,{"data-testid":"add-table-button",icon:o,onClick:()=>{i.chain().focus().insertTable({rows:1,cols:3,withHeaderRow:!1}).run()}})};export{i as TextTable};

package/dist/molecules/RichTextEditor/MenuBar/Table/TableBar.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { Editor } from '@tiptap/react';
+export declare const TableMenuBar: FC<{
+    editor: Editor;
+}>;
+export declare const TextTable: {
+    delete: FC<{
+        editor: Editor;
+    }>;
+    toggle: FC<{
+        editor: Editor;
+    }>;
+    column: FC<{
+        editor: Editor;
+    }>;
+    row: FC<{
+        editor: Editor;
+    }>;
+    merge: FC<{
+        editor: Editor;
+    }>;
+};

package/dist/molecules/RichTextEditor/MenuBar/Table/TableBar.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{EditorMenu as o}from"../MenuBar.js";import{TableColumn as t}from"./TableColumn.js";import{TableDelete as m}from"./TableDelete.js";import{TableMerge as i}from"./TableMerge.js";import{TableRow as l}from"./TableRow.js";import{ToggleTable as a}from"./ToggleTable.js";const s=({editor:s})=>s.isActive("table")?e(o.Bar,{children:[r(m,{editor:s}),r(a,{editor:s}),r(t,{editor:s}),r(l,{editor:s}),r(i,{editor:s})]}):null,d={delete:m,toggle:a,column:t,row:l,merge:i};export{s as TableMenuBar,d as TextTable};

package/dist/molecules/RichTextEditor/MenuBar/Table/TableColumn.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { Editor } from '@tiptap/react';
+export declare const TableColumn: FC<{
+    editor: Editor;
+}>;

package/dist/molecules/RichTextEditor/MenuBar/Table/TableColumn.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as n}from"react/jsx-runtime";import{MenuSection as e}from"../MenuBar.styles.js";import{MenuButton as i}from"../MenuButton.js";import{amplify_table_add_column_left as t,amplify_table_add_column_right as l,amplify_table_remove_column as c}from"../../../../atoms/icons/wysiwyg.js";const d=({editor:d})=>o(e,{children:[n(i,{tooltip:"Add column left",icon:t,onClick:()=>d.chain().focus().addColumnBefore().run(),disabled:!d.can().addColumnBefore()}),n(i,{tooltip:"Add column right",icon:l,onClick:()=>d.chain().focus().addColumnAfter().run(),disabled:!d.can().addColumnAfter()}),n(i,{tooltip:"Remove column",icon:c,onClick:()=>d.chain().focus().deleteColumn().run(),disabled:!d.can().deleteColumn()})]});export{d as TableColumn};

package/dist/molecules/RichTextEditor/MenuBar/Table/TableDelete.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { Editor } from '@tiptap/react';
+export declare const TableDelete: FC<{
+    editor: Editor;
+}>;

package/dist/molecules/RichTextEditor/MenuBar/Table/TableDelete.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{table_chart as o}from"@equinor/eds-icons";import{MenuButton as t}from"../MenuButton.js";const i=({editor:i})=>e(t,{active:!0,"data-testid":"remove-table",tooltip:"Remove table",icon:o,onClick:()=>i.chain().focus().deleteTable().run()});export{i as TableDelete};

package/dist/molecules/RichTextEditor/MenuBar/Table/TableMerge.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { Editor } from '@tiptap/react';
+export declare const TableMerge: FC<{
+    editor: Editor;
+}>;

package/dist/molecules/RichTextEditor/MenuBar/Table/TableMerge.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as l}from"react/jsx-runtime";import{MenuSection as o}from"../MenuBar.styles.js";import{MenuButton as i}from"../MenuButton.js";import{amplify_table_merge_cells as t,amplify_table_split_cell as s}from"../../../../atoms/icons/wysiwyg.js";const r=({editor:r})=>e(o,{children:[l(i,{tooltip:"Merge selected cells",icon:t,onClick:()=>r.chain().focus().mergeCells().run(),disabled:!r.can().mergeCells()}),l(i,{tooltip:"Split selected cell",icon:s,onClick:()=>r.chain().focus().splitCell().run(),disabled:!r.can().splitCell()})]});export{r as TableMerge};

package/dist/molecules/RichTextEditor/MenuBar/Table/TableRow.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { Editor } from '@tiptap/react';
+export declare const TableRow: FC<{
+    editor: Editor;
+}>;

package/dist/molecules/RichTextEditor/MenuBar/Table/TableRow.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as e}from"react/jsx-runtime";import{MenuSection as i}from"../MenuBar.styles.js";import{MenuButton as r}from"../MenuButton.js";import{amplify_table_add_row_below as t,amplify_table_add_row_above as d,amplify_table_remove_row as n}from"../../../../atoms/icons/wysiwyg.js";const c=({editor:c})=>o(i,{children:[e(r,{tooltip:"Add row below",icon:t,onClick:()=>c.chain().focus().addRowAfter().run(),disabled:!c.can().addRowAfter()}),e(r,{tooltip:"Add row above",icon:d,onClick:()=>c.chain().focus().addRowBefore().run(),disabled:!c.can().addRowBefore()}),e(r,{tooltip:"Remove row",icon:n,onClick:()=>c.chain().focus().deleteRow().run(),disabled:!c.can().deleteRow()})]});export{c as TableRow};

package/dist/molecules/RichTextEditor/MenuBar/Table/ToggleTable.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { Editor } from '@tiptap/react';
+export declare const ToggleTable: FC<{
+    editor: Editor;
+}>;

package/dist/molecules/RichTextEditor/MenuBar/Table/ToggleTable.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as e}from"react/jsx-runtime";import{MenuSection as r}from"../MenuBar.styles.js";import{MenuButton as t}from"../MenuButton.js";import{amplify_table_row_heading as n,amplify_table_column_heading as i}from"../../../../atoms/icons/wysiwyg.js";const l=({editor:l})=>o(r,{children:[e(t,{tooltip:"Toggle header row",icon:n,onClick:()=>l.chain().focus().toggleHeaderRow().run(),disabled:!l.can().toggleHeaderRow()}),e(t,{tooltip:"Toggle header column",icon:i,onClick:()=>l.chain().focus().toggleHeaderColumn().run(),disabled:!l.can().toggleHeaderColumn()})]});export{l as ToggleTable};

package/dist/molecules/RichTextEditor/MenuBar/TextAlignment.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../RichTextEditor.types';
+export declare const TextAlignment: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextAlignment.js

@@ -0,0 +1 @@
+import{jsxs as t,jsx as i}from"react/jsx-runtime";import{format_align_left as e,format_align_center as n,format_align_right as c}from"@equinor/eds-icons";import{RichTextEditorFeatures as o}from"../RichTextEditor.types.js";import{EditorMenu as r}from"./MenuBar.js";const s=({editor:s,features:u})=>{if(!u||u.includes(o.ALIGNMENT))return t(r.Section,{children:[i(r.Button,{active:s.isActive({textAlign:"left"}),icon:e,onClick:()=>s.chain().focus().setTextAlign("left").run()}),i(r.Button,{active:s.isActive({textAlign:"center"}),icon:n,onClick:()=>s.chain().focus().setTextAlign("center").run()}),i(r.Button,{active:s.isActive({textAlign:"right"}),icon:c,onClick:()=>s.chain().focus().setTextAlign("right").run()})]})};export{s as TextAlignment};

package/dist/molecules/RichTextEditor/MenuBar/TextClearFormating.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../RichTextEditor.types';
+export declare const TextClearFormating: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextClearFormating.js

@@ -0,0 +1,4 @@
+import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{format_clear as i}from"@equinor/eds-icons";import{tokens as n}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{RichTextEditorFeatures as t}from"../RichTextEditor.types.js";import{EditorMenu as s}from"./MenuBar.js";import a from"styled-components";const{colors:c}=n,u=a.hr`
+  width: 1px;
+  background: ${c.ui.background__medium.rgba};
+`,m=({editor:n,features:a})=>{if(!a||a.includes(t.CLEAR_FORMATTING))return r(o,{children:[e(u,{}),e(s.Button,{icon:i,onClick:()=>n.chain().focus().clearNodes().unsetAllMarks().run(),customColors:{resting:c.interactive.warning__resting.rgba,hover:c.interactive.warning__hover.rgba,backgroundHover:c.ui.background__warning.rgba}})]})};export{m as TextClearFormating};

package/dist/molecules/RichTextEditor/MenuBar/TextCode.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../RichTextEditor.types';
+export declare const TextCode: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextCode.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import{code as r}from"@equinor/eds-icons";import{RichTextEditorFeatures as t}from"../RichTextEditor.types.js";import{EditorMenu as e}from"./MenuBar.js";const i=({editor:i,features:c})=>{if(!c||c.includes(t.CODE))return o(e.Button,{active:i.isActive("codeBlock"),icon:r,onClick:()=>i.chain().focus().toggleCodeBlock().run()})};export{i as TextCode};

package/dist/molecules/RichTextEditor/MenuBar/TextColor.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../RichTextEditor.types';
+export declare const TextColor: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextColor.js

@@ -0,0 +1,45 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Icon as o}from"@equinor/eds-core-react";import{format_color_text as r}from"@equinor/eds-icons";import{tokens as i}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{RichTextEditorFeatures as a}from"../RichTextEditor.types.js";import s from"styled-components";const{colors:n,spacings:l,shape:c}=i,d=s.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${l.comfortable.medium};
+  position: relative;
+  background: ${n.ui.background__light.rgba};
+  border-radius: ${c.button.borderRadius};
+  transition: 200ms background;
+  > input {
+    border-radius: ${c.button.borderRadius};
+    width: calc(24px + (${l.comfortable.x_small}) * 2);
+    height: calc(24px + (${l.comfortable.x_small}) * 2);
+    opacity: 0;
+    &:hover {
+      cursor: pointer;
+    }
+    &::-webkit-color-swatch {
+      border: none;
+    }
+  }
+  svg {
+    fill: ${n.interactive.primary__resting.rgba};
+    transition: 200ms fill;
+  }
+  &:hover {
+    background: ${n.interactive.primary__hover_alt.rgba};
+
+    svg {
+      fill: ${n.interactive.primary__hover.rgba};
+    }
+  }
+`,u=s.span`
+  position: absolute;
+  left: 50%;
+  top: calc(50% + ${l.comfortable.x_small} / 2);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+`,m=s.span`
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 5px;
+  height: 4px;
+  width: 24px;
+`,p=({editor:i,features:s})=>s&&!s.includes(a.TEXT_COLOR)?null:t(d,{children:[e("input",{type:"color",onInput:t=>{i.chain().focus().setColor(t.target.value).run()},value:i.getAttributes("textStyle")?.color||n.text.static_icons__default.hex}),e(u,{children:e(o,{data:r})}),e(m,{style:{background:i.getAttributes("textStyle")?.color||n.text.static_icons__default.hex}})]});export{p as TextColor};

package/dist/molecules/RichTextEditor/MenuBar/TextFormating.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../RichTextEditor.types';
+export declare const TextFormating: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextFormating.js

@@ -0,0 +1 @@
+import{jsxs as i,jsx as o}from"react/jsx-runtime";import{format_bold as t,format_italics as c}from"@equinor/eds-icons";import{RichTextEditorFeatures as e}from"../RichTextEditor.types.js";import{EditorMenu as r}from"./MenuBar.js";const n=({editor:n,features:s})=>{if(!s||s.includes(e.FORMATTING))return i(r.Section,{children:[o(r.Button,{active:n.isActive("bold"),icon:t,onClick:()=>n.chain().focus().toggleBold().run()}),o(r.Button,{active:n.isActive("italic"),icon:c,onClick:()=>n.chain().focus().toggleItalic().run()})]})};export{n as TextFormating};

package/dist/molecules/RichTextEditor/MenuBar/TextHeaders.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../RichTextEditor.types';
+export declare const TextHeaders: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextHeaders.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{RichTextEditorFeatures as t}from"../RichTextEditor.types.js";import{EditorMenu as o}from"./MenuBar.js";import{amplify_h2 as n,amplify_h3 as r}from"../../../atoms/icons/wysiwyg.js";const c=({editor:c,features:s})=>{if(!s||s.includes(t.HEADERS))return e(o.Section,{children:[i(o.Button,{active:c.isActive("heading",{level:2}),icon:n,onClick:()=>c.chain().focus().toggleHeading({level:2}).run()}),i(o.Button,{active:c.isActive("heading",{level:3}),icon:r,onClick:()=>c.chain().focus().toggleHeading({level:3}).run()})]})};export{c as TextHeaders};

package/dist/molecules/RichTextEditor/MenuBar/TextHistory.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../RichTextEditor.types';
+export declare const TextHistory: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextHistory.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as n}from"react/jsx-runtime";import{undo as r,redo as i}from"@equinor/eds-icons";import{RichTextEditorFeatures as e}from"../RichTextEditor.types.js";import{EditorMenu as t}from"./MenuBar.js";const c=({editor:c,features:u})=>{if(!u||u.includes(e.HISTORY))return o(t.Section,{children:[n(t.Button,{icon:r,onClick:()=>c.chain().focus().undo().run(),disabled:!c.can().undo()}),n(t.Button,{icon:i,onClick:()=>c.chain().focus().redo().run(),disabled:!c.can().redo()})]})};export{c as TextHistory};

package/dist/molecules/RichTextEditor/MenuBar/TextLinks.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../RichTextEditor.types';
+export declare const TextLinks: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextLinks.js

@@ -0,0 +1,6 @@
+import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useState as r,useRef as n}from"react";import{Popover as o,Icon as c,Button as s}from"@equinor/eds-core-react";import{link as l,link_off as a}from"@equinor/eds-icons";import{tokens as d}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{RichTextEditorFeatures as u}from"../RichTextEditor.types.js";import{EditorMenu as m}from"./MenuBar.js";import f from"../../../atoms/utils/url.js";import{TextField as p}from"../../TextField/TextField.js";import h from"styled-components";const{spacings:k}=d,g=h.div`
+  display: flex;
+  gap: ${k.comfortable.medium};
+  padding: ${k.comfortable.small};
+  width: 15rem;
+`,v=({editor:d,features:h})=>{const[k,v]=r(!1),x=n(null),b=n(""),[j,y]=r(!1),C=()=>{v(!1),b.current="",d.chain().focus().unsetHighlight().run()},q=()=>{f.isValidUrl(b.current)?(d.chain().focus().extendMarkRange("link").setLink({href:b.current}).run(),C(),j&&y(!1)):y(!0)};if(!h||h.includes(u.LINKS))return e(t,{children:[e(m.Section,{children:[i(m.Button,{active:k,ref:x,icon:l,onClick:()=>{v((e=>!e)),d.chain().focus().setHighlight({color:"#accef7"}).run()},disabled:d.state.selection.empty,"data-testid":"link-button"}),i(m.Button,{icon:a,onClick:()=>d?.chain().focus().unsetLink().run(),disabled:!d.isActive("link")})]}),k&&i(o,{open:!0,anchorEl:x.current,onClose:C,children:e(g,{children:[i(p,{inputRef:e=>{e?.focus()},id:"link",placeholder:"Insert link",autoComplete:"off",inputIcon:i(c,{data:l}),onChange:e=>{b.current=e.target.value},onKeyDown:e=>{"Enter"===e.key&&q()},variant:j?"error":void 0}),i(s,{variant:"outlined",onClick:q,children:"Save"})]})})]})};export{v as TextLinks};

package/dist/molecules/RichTextEditor/MenuBar/TextLists.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorPanel } from '../RichTextEditor.types';
+export declare const TextLists: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextLists.js

@@ -0,0 +1 @@
+import{jsxs as t,jsx as i}from"react/jsx-runtime";import{format_list_bulleted as e,format_list_numbered as o}from"@equinor/eds-icons";import{RichTextEditorFeatures as r}from"../RichTextEditor.types.js";import{EditorMenu as c}from"./MenuBar.js";const n=({editor:n,features:s})=>{if(!s||s.includes(r.LISTS))return t(c.Section,{children:[i(c.Button,{active:n.isActive("bulletList"),icon:e,onClick:()=>n.chain().focus().toggleBulletList().run()}),i(c.Button,{active:n.isActive("orderedList"),icon:o,onClick:()=>n.chain().focus().toggleOrderedList().run()})]})};export{n as TextLists};

package/dist/molecules/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { OnImageUploadFn, RichTextEditorFeatures } from './RichTextEditor.types';
+export interface RichTextEditorProps {
+    value: string | null | undefined;
+    onChange: (value: string) => void;
+    onImageUpload?: OnImageUploadFn;
+    placeholder?: string;
+    features?: RichTextEditorFeatures[];
+    extendFeatures?: RichTextEditorFeatures[];
+    removeFeatures?: RichTextEditorFeatures[];
+    padding?: 'sm' | 'md' | 'lg' | 'none';
+    maxHeight?: string;
+    minHeight?: string;
+    lightBackground?: boolean;
+    border?: boolean;
+}
+export declare const RichTextEditor: FC<RichTextEditorProps>;

package/dist/molecules/RichTextEditor/RichTextEditor.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{AmplifyBar as t}from"./MenuBar/MenuBar.js";import{EditorProvider as o}from"./EditorProvider.js";import{EditorStyling as a,EditorContent as d}from"./RichTextEditor.styles.js";import{getFeatures as i}from"../../atoms/utils/getFeatures.js";const n=({value:n,onChange:m,onImageUpload:s,placeholder:u,features:g,extendFeatures:l,removeFeatures:p,padding:h="md",maxHeight:c,minHeight:f,lightBackground:x,border:j=!0})=>{const F=i({features:g,extendFeatures:l,removeFeatures:p,onImageUpload:s});return e(o,{content:n,onUpdate:m,features:F,placeholder:u,onImageUpload:s,children:o=>r(a,{$border:j,$padding:h,$lightBackground:x,children:[e(t,{editor:o,features:F,onImageUpload:s}),e(d,{editor:o,$maxHeight:c,$minHeight:f})]})})};export{n as RichTextEditor};

package/dist/molecules/RichTextEditor/RichTextEditor.styles.d.ts

@@ -0,0 +1,14 @@
+export interface RichTextContentProps {
+    $minHeight?: string;
+    $maxHeight?: string;
+    className?: string;
+}
+export declare const EditorContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, RichTextContentProps>> & string & Omit<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>, keyof import("react").Component<any, {}, any>>;
+export interface EditorStylingProps {
+    $lightBackground?: boolean;
+    $padding?: 'sm' | 'md' | 'lg' | 'none';
+    $border?: boolean;
+}
+export declare const EditorStyling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, EditorStylingProps>> & string;

package/dist/molecules/RichTextEditor/RichTextEditor.styles.js

@@ -0,0 +1,138 @@
+import{tokens as o}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{EditorContent as e}from"@tiptap/react";import r from"styled-components";const{colors:t,spacings:i,typography:a,shape:n}=o,d=r(e)`
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow-y: auto;
+  min-height: ${o=>o.$minHeight||"auto"};
+  max-height: ${o=>o.$maxHeight||"auto"};
+`,l=r.div`
+  display: grid;
+  background: ${t.ui.background__default.rgba};
+  border-radius: ${n.corners.borderRadius} ${n.corners.borderRadius} 0 0;
+  border: ${o=>o.$border?`1px solid ${t.ui.background__medium.rgba}`:"none"};
+  border-bottom: none;
+
+  &:has(div[contenteditable='true']) {
+    height: inherit;
+  }
+
+  & [data-placeholder]::before {
+    color: ${t.text.static_icons__tertiary.rgba} !important;
+  }
+
+  .tiptap {
+    box-sizing: border-box;
+    overflow-y: auto;
+    background: ${o=>o.$lightBackground?`${t.ui.background__default.rgba}`:`${t.ui.background__light.rgba}`};
+
+    &[contenteditable='true'] {
+      box-shadow: inset 0 -1px ${t.ui.background__medium.rgba};
+    }
+
+    padding: ${o=>{switch(o.$padding){case"sm":return i.comfortable.small;case"md":return i.comfortable.medium;case"lg":return i.comfortable.large;default:return 0}}};
+
+    a {
+      color: ${t.interactive.primary__resting.rgba};
+    }
+    a:hover {
+      cursor: pointer;
+      color: ${t.interactive.primary__hover.rgba};
+    }
+    p {
+      font-size: 16px;
+      font-family: 'Equinor', sans-serif;
+      color: ${t.text.static_icons__default.rgba};
+      line-height: ${a.paragraph.body_long.lineHeight};
+      margin: 0;
+    }
+    ul,
+    ol {
+      margin: 0;
+    }
+    img {
+      max-width: 100%;
+      max-height: 100%;
+      border-radius: 5px;
+    }
+    pre {
+      background: #0d0d0d;
+      border-radius: 0.5rem;
+      color: #fff;
+      font-family: 'Equinor Mono', monospace;
+      padding: 0.75rem 1rem;
+      margin: 0;
+
+      code {
+        background: none;
+        color: inherit;
+        font-size: 0.8rem;
+        padding: 0;
+      }
+    }
+
+    table {
+      border-collapse: collapse;
+      overflow: hidden;
+      table-layout: fixed;
+      width: 100%;
+
+      td,
+      th {
+        border: 2px solid #ced4da;
+        box-sizing: border-box;
+        min-width: 1em;
+        padding: 3px 5px;
+        position: relative;
+        vertical-align: top;
+
+        > * {
+          margin-bottom: 0;
+        }
+      }
+
+      th {
+        background-color: #f1f3f5;
+        font-weight: bold;
+        text-align: left;
+      }
+
+      .selectedCell:after {
+        background: rgba(200, 200, 255, 0.4);
+        content: '';
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        pointer-events: none;
+        position: absolute;
+        z-index: 2;
+      }
+
+      .column-resize-handle {
+        background-color: #adf;
+        bottom: -2px;
+        position: absolute;
+        right: -2px;
+        pointer-events: none;
+        top: 0;
+        width: 4px;
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: inset 0 -2px ${t.interactive.primary__resting.rgba};
+    }
+  }
+
+  .tiptap p.is-editor-empty:first-child::before {
+    color: ${t.text.static_icons__default.rgba};
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+`;export{d as EditorContent,l as EditorStyling};

package/dist/molecules/RichTextEditor/RichTextEditor.types.d.ts

@@ -0,0 +1,23 @@
+import { Editor } from '@tiptap/react';
+export declare enum RichTextEditorFeatures {
+    HISTORY = "history",
+    FORMATTING = "formatting",
+    HEADERS = "headers",
+    LISTS = "lists",
+    TEXT_COLOR = "text-color",
+    CODE = "code",
+    ALIGNMENT = "alignment",
+    LINKS = "links",
+    IMAGES = "images",
+    CLEAR_FORMATTING = "clear-formatting",
+    TABLE = "table"
+}
+export declare const DEFAULT_FEATURES: RichTextEditorFeatures[];
+export type OnImageUploadFn = (file: File) => Promise<{
+    b64: string;
+    url: string;
+} | undefined>;
+export interface EditorPanel {
+    editor: Editor;
+    features?: RichTextEditorFeatures[];
+}

package/dist/molecules/RichTextEditor/custom-extensions/AmplifyKit.d.ts

@@ -0,0 +1,55 @@
+import { Extension } from '@tiptap/core';
+import { BoldOptions } from '@tiptap/extension-bold';
+import { BulletListOptions } from '@tiptap/extension-bullet-list';
+import { CodeBlockLowlightOptions } from '@tiptap/extension-code-block-lowlight';
+import { ColorOptions } from '@tiptap/extension-color';
+import { DropcursorOptions } from '@tiptap/extension-dropcursor';
+import { HardBreakOptions } from '@tiptap/extension-hard-break';
+import { HeadingOptions } from '@tiptap/extension-heading';
+import { HighlightOptions } from '@tiptap/extension-highlight';
+import { HistoryOptions } from '@tiptap/extension-history';
+import { ItalicOptions } from '@tiptap/extension-italic';
+import { LinkOptions } from '@tiptap/extension-link';
+import { ListItemOptions } from '@tiptap/extension-list-item';
+import { OrderedListOptions } from '@tiptap/extension-ordered-list';
+import { ParagraphOptions } from '@tiptap/extension-paragraph';
+import { PlaceholderOptions } from '@tiptap/extension-placeholder';
+import { TableOptions } from '@tiptap/extension-table';
+import { TableCellOptions } from '@tiptap/extension-table-cell';
+import { TableHeaderOptions } from '@tiptap/extension-table-header';
+import { TableRowOptions } from '@tiptap/extension-table-row';
+import { TextAlignOptions } from '@tiptap/extension-text-align';
+import { TextStyleOptions } from '@tiptap/extension-text-style';
+import { TypographyOptions } from '@tiptap/extension-typography';
+import { ExtendedImageOptions } from './ExtendedImage';
+import { mergeDefaults } from './mergeDefaults';
+export interface AmplifyKitOptions {
+    bold: Partial<BoldOptions> | false;
+    bulletList: Partial<BulletListOptions> | false;
+    hardBreak: Partial<HardBreakOptions> | false;
+    heading: Partial<HeadingOptions> | false;
+    history: Partial<HistoryOptions> | false;
+    italic: Partial<ItalicOptions> | false;
+    listItem: Partial<ListItemOptions> | false;
+    orderedList: Partial<OrderedListOptions> | false;
+    paragraph: Partial<ParagraphOptions> | false;
+    codeBlockLowlight: Partial<CodeBlockLowlightOptions> | false;
+    color: Partial<ColorOptions> | false;
+    image: Partial<ExtendedImageOptions> | false;
+    highlight: Partial<HighlightOptions> | false;
+    link: Partial<LinkOptions> | false;
+    placeholder: Partial<PlaceholderOptions> | false;
+    table: Partial<TableOptions> | false;
+    tableCell: Partial<TableCellOptions> | false;
+    tableHeader: Partial<TableHeaderOptions> | false;
+    tableRow: Partial<TableRowOptions> | false;
+    typography: Partial<TypographyOptions> | false;
+    textStyle: Partial<TextStyleOptions> | false;
+    textAlign: Partial<TextAlignOptions> | false;
+    dropCursor: Partial<DropcursorOptions> | false;
+    gapCursor: false;
+    document: false;
+    text: false;
+}
+export declare const AmplifyKit: Extension<AmplifyKitOptions, any>;
+export { mergeDefaults };

package/dist/molecules/RichTextEditor/custom-extensions/AmplifyKit.js

@@ -0,0 +1 @@
+import{Extension as e}from"@tiptap/core";import{Bold as t}from"@tiptap/extension-bold";import{BulletList as o}from"@tiptap/extension-bullet-list";import{CodeBlockLowlight as n}from"@tiptap/extension-code-block-lowlight";import{Color as i}from"@tiptap/extension-color";import{Document as r}from"@tiptap/extension-document";import{Dropcursor as a}from"@tiptap/extension-dropcursor";import p from"@tiptap/extension-gapcursor";import{HardBreak as m}from"@tiptap/extension-hard-break";import{Highlight as s}from"@tiptap/extension-highlight";import{History as l}from"@tiptap/extension-history";import{Italic as x}from"@tiptap/extension-italic";import{Link as d}from"@tiptap/extension-link";import{ListItem as f}from"@tiptap/extension-list-item";import{OrderedList as h}from"@tiptap/extension-ordered-list";import{Paragraph as g}from"@tiptap/extension-paragraph";import{Placeholder as c}from"@tiptap/extension-placeholder";import{Table as b}from"@tiptap/extension-table";import{TableCell as u}from"@tiptap/extension-table-cell";import{TableHeader as y}from"@tiptap/extension-table-header";import{TableRow as w}from"@tiptap/extension-table-row";import{Text as k}from"@tiptap/extension-text";import{TextAlign as A}from"@tiptap/extension-text-align";import{TextStyle as B}from"@tiptap/extension-text-style";import{Typography as L}from"@tiptap/extension-typography";import j from"./ExtendedHeaders.js";import C from"./ExtendedImage.js";import{mergeDefaults as E}from"./mergeDefaults.js";import{createLowlight as H,common as I}from"lowlight";const z=H(I),D=[{name:"bold",extension:t},{name:"bulletList",extension:o},{name:"document",extension:r},{name:"hardBreak",extension:m},{name:"history",extension:l},{name:"italic",extension:x},{name:"listItem",extension:f},{name:"orderedList",extension:h},{name:"paragraph",extension:g},{name:"text",extension:k},{name:"codeBlockLowlight",extension:n},{name:"color",extension:i},{name:"dropCursor",extension:a},{name:"gapCursor",extension:p},{name:"highlight",extension:s},{name:"link",extension:d},{name:"placeholder",extension:c},{name:"table",extension:b},{name:"tableCell",extension:u},{name:"tableHeader",extension:y},{name:"tableRow",extension:w},{name:"typography",extension:L},{name:"textStyle",extension:B},{name:"textAlign",extension:A},{name:"image",extension:C},{name:"heading",extension:j}],K=e.create({name:"AmplifyKit",addExtensions(){const e=E({options:this.options,defaults:{codeBlockLowlight:{lowlight:z},highlight:{multicolor:!0},table:{resizable:!0},image:{allowBase64:!0},placeholder:{placeholder:"Add text and content here..."},textAlign:{types:["heading","paragraph","img"]}}});return D.filter((t=>!1!==e[t.name])).map((t=>{const o=e[t.name];return o?t.extension.configure(o):t.extension}))}});export{K as AmplifyKit,E as mergeDefaults};

package/dist/molecules/RichTextEditor/custom-extensions/Counter.d.ts

@@ -0,0 +1,3 @@
+import { Node } from '@tiptap/core';
+declare const _default: Node<any, any>;
+export default _default;

package/dist/molecules/RichTextEditor/custom-extensions/ExtendedHeaders.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@tiptap/react").Node<import("@tiptap/extension-heading").HeadingOptions, any>;
+export default _default;

package/dist/molecules/RichTextEditor/custom-extensions/ExtendedHeaders.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import e from"@tiptap/extension-heading";import{ReactNodeViewRenderer as r,NodeViewWrapper as o,NodeViewContent as i}from"@tiptap/react";import"../../AnimatedCheckmark/AnimatedCheckmark.js";import"../../ApplicationIcon/ApplicationIcon.js";import"../../Badge/Badge.styles.js";import"../../Chip/Chip.js";import"../../ContentMenu/ContentMenu.js";import"../../EquinorLogo/EquinorLogo.js";import"react";import{Typography as s}from"@equinor/eds-core-react";import"@equinor/eds-icons";import"../../FileProgress/CompactFileProgress.styles.js";import"../../../atoms/utils/auth_environment.js";import"../../../atoms/types/Errors.js";import"../../../organisms/ErrorPage/illustrations/GlitchAnimation.js";import"../../../organisms/ErrorPage/illustrations/QuestioningAnimation.js";import"html2canvas";import"../RichTextEditor.types.js";import"proj4";import"../../FileProgress/RegularFileProgress.styles.js";import"../../FileUploadArea/FileUploadArea.js";import"../../FullPageSpinner/FullPageSpinner.js";import"../../InfoElement/InfoElement.js";import"../../OptionalTooltip/OptionalTooltip.js";import"../../ProfileAvatar/ProfileAvatar.js";import"./AmplifyKit.js";import"../MenuBar/MenuBar.js";import"../RichTextEditor.styles.js";import"../MenuBar/MenuBar.styles.js";import"../MenuBar/MenuButton.js";import"../../Search/Search.js";import"react-router-dom";import"../../Sieve/Sieve.styles.js";import"../../../node_modules/lodash/lodash.js";import"../../SingleFilterMenu/SingleFilterMenu.js";import"../../Skeleton/SkeletonBase/SkeletonBase.js";import"../../Stepper/Stepper.js";import"../../OptionDrawer/OptionDrawer.js";import"../../ListItem/ListItem.js";const n=e=>{const r=e.node.attrs.level;let n="h1";return 2===r&&(n="h2"),3===r&&(n="h3"),4===r&&(n="h4"),5===r&&(n="h5"),6===r&&(n="h6"),t(o,{children:t(s,{variant:n,children:t(i,{className:"content is-editable"})})})};var p=e.extend({content:"inline*",addNodeView:()=>r(n)});export{p as default};

package/dist/molecules/RichTextEditor/custom-extensions/ExtendedImage.d.ts

@@ -0,0 +1,15 @@
+import { OnImageUploadFn } from '../RichTextEditor.types';
+export interface ExtendedImageOptions {
+    inline: boolean;
+    allowBase64: boolean;
+    onImageUpload?: OnImageUploadFn;
+}
+declare module '@tiptap/extension-image' {
+    interface ImageOptions {
+        inline: boolean;
+        allowBase64: boolean;
+        onImageUpload?: OnImageUploadFn;
+    }
+}
+declare const _default: import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>;
+export default _default;

package/dist/molecules/RichTextEditor/custom-extensions/ExtendedImage.js

@@ -0,0 +1 @@
+import e from"@tiptap/extension-image";import{Plugin as t,PluginKey as r}from"../../../node_modules/prosemirror-state/dist/index.js";var o=e.extend({addOptions(){return{...this.parent?.(),onImageUpload:void 0}},addProseMirrorPlugins(){const{onImageUpload:e}=this.options;return[new t({key:new r("extendedImageHandler"),props:{handleDOMEvents:{drop(t,r){const o=r.dataTransfer?.files?.length;if(!o||void 0===e)return;const n=Array.from(r.dataTransfer.files).filter((e=>/image/i.test(e.type)));if(0===n.length)return;r.preventDefault();const{schema:s}=t.state,a=t.posAtCoords({left:r.clientX,top:r.clientY});if(a)for(const r of n)e(r).then((e=>{if(!e)return;const r=s.nodes.image.create({src:e.b64,alt:e.url}),o=t.state.tr.insert(a.pos,r);t.dispatch(o)})).catch((e=>{console.error(e)}))},paste(t,r){const o=r.clipboardData?.files?.length;if(!o||void 0===e)return;const n=Array.from(r.clipboardData.files).filter((e=>/image/i.test(e.type)));if(0===n.length)return;r.preventDefault();const{schema:s}=t.state;for(const r of n)e(r).then((e=>{if(!e)return;const r=s.nodes.image.create({src:e.b64,alt:e.url}),o=t.state.tr.replaceSelectionWith(r);t.dispatch(o)})).catch((e=>{console.error(e)}))}}}})]}});export{o as default};

package/dist/molecules/RichTextEditor/custom-extensions/mergeDefaults.d.ts

@@ -0,0 +1,7 @@
+import { AmplifyKitOptions } from './AmplifyKit';
+interface MergedDefaults {
+    options?: Partial<AmplifyKitOptions>;
+    defaults: Partial<AmplifyKitOptions>;
+}
+declare function mergeDefaults({ options, defaults }: MergedDefaults): Partial<AmplifyKitOptions>;
+export { mergeDefaults };

package/dist/molecules/RichTextEditor/custom-extensions/mergeDefaults.js

@@ -0,0 +1 @@
+function n({options:n,defaults:t}){if(!n)return t;const o={...t};for(const r in n){const s=r,c=n[s];o[s]=!1===c?c:{...t[s],...n[s]}}return o}export{n as mergeDefaults};

package/dist/molecules/RichTextEditor/index.d.ts

@@ -0,0 +1,10 @@
+export { RichTextEditor } from './RichTextEditor';
+export declare const RichText: {
+    Styling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("./RichTextEditor.styles").EditorStylingProps>> & string;
+    Provider: import("react").FC<import("./EditorProvider").EditorProviderProps>;
+    Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, import("./RichTextEditor.styles").RichTextContentProps>> & string & Omit<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>, keyof import("react").Component<any, {}, any>>;
+    Bar: import("react").FC<import("./MenuBar/MenuBar").MenuBarProps>;
+    Kit: import("@tiptap/core").Extension<import("./custom-extensions/AmplifyKit").AmplifyKitOptions, any>;
+};