@use-kona/editor 0.1.8-rc.8 → 0.1.9

package/dist/core/createEditable.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import is_hotkey from "is-hotkey";
 import react, { isValidElement, useCallback } from "react";
 import { Transforms } from "slate";
@@ -87,7 +87,11 @@ const createEditable = (editor, plugins)=>({ readOnly })=>{
                 className: styles_module.editor,
                 children: children
             });
-            return /*#__PURE__*/ jsxs(Fragment, {
+            return /*#__PURE__*/ jsxs("div", {
+                className: styles_module.ui,
+                onClick: (event)=>{
+                    event.stopPropagation();
+                },
                 children: [
                     ui.map((p, index)=>/*#__PURE__*/ jsx(react.Fragment, {
                             children: p.ui({

package/dist/core/styles.module.js

@@ -1,6 +1,7 @@
 import "./styles_module.css";
 const styles_module = {
     root: "root-e1gdll",
+    ui: "ui-I68yAA",
     editor: "editor-K2itFp"
 };
 export { styles_module as default };

package/dist/core/styles_module.css

@@ -1,5 +1,6 @@
 .root-e1gdll {
   height: 100%;
+  min-height: 0;
   color: var(--kona-editor-text-color, #444);
   background-color: var(--kona-editor-background-color, #fff);
   flex-direction: column;
@@ -7,8 +8,13 @@
   position: relative;
 }
 
+.ui-I68yAA {
+  height: 100%;
+}
+
 .editor-K2itFp {
   outline: none;
+  height: 100%;
   overflow: auto;
 
   &::-webkit-scrollbar {

package/dist/editor.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useState } from "react";
-import { Transforms } from "slate";
+import { Editor, Transforms } from "slate";
 import { ReactEditor, Slate } from "slate-react";
 import { createEditable } from "./core/createEditable.js";
 import { createEditor } from "./core/createEditor.js";
@@ -23,7 +23,11 @@ const KonaEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
             deserialize: deserialize(plugins),
             deleteNode,
             isEmpty: ()=>isEmpty(editor.children),
-            focus: ()=>{
+            focus: (mode)=>{
+                if ('end' === mode) {
+                    const endPoint = Editor.end(editor, []);
+                    Transforms.select(editor, endPoint);
+                }
                 ReactEditor.focus(editor);
             }
         };

package/dist/plugins/BasicFormattingPlugin/BasicFormattingPlugin.js

@@ -48,6 +48,9 @@ class BasicFormattingPlugin {
                 });
                 return /*#__PURE__*/ jsx("span", {
                     ...attributes,
+                    style: {
+                        paddingRight: '0.001em'
+                    },
                     children: content
                 });
             },

package/dist/plugins/LinksPlugin/Link.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { type RenderElementProps } from 'slate-react';
 import type { LinkElement, Options } from './types';
 type Props = {

package/dist/plugins/LinksPlugin/Link.js

@@ -1,4 +1,4 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useReadOnly, useSlateStatic } from "slate-react";
@@ -19,7 +19,7 @@ const Link = (props)=>{
             setOpen(true);
         }
     };
-    const handleMenuClick = (event)=>{
+    const handleMenuClick = ()=>{
         setOpen(false);
     };
     useLayoutEffect(()=>{
@@ -43,7 +43,6 @@ const Link = (props)=>{
     return /*#__PURE__*/ jsxs(Component, {
         ref: ref,
         className: styles_module.link,
-        contentEditable: false,
         children: [
             /*#__PURE__*/ jsxs("a", {
                 ...attributes,
@@ -57,24 +56,16 @@ const Link = (props)=>{
                     /*#__PURE__*/ jsx(InlineChromiumBugfix, {})
                 ]
             }),
-            isOpen && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: styles_module.backdrop,
-                        onClick: ()=>setOpen(false)
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        contentEditable: false,
-                        className: styles_module.hint,
-                        style: style,
-                        onMouseUp: handleMenuClick,
-                        children: renderHint({
-                            getLinkElement,
-                            getUrl,
-                            getEditor
-                        })
-                    })
-                ]
+            isOpen && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+                contentEditable: false,
+                className: styles_module.hint,
+                style: style,
+                onMouseUp: handleMenuClick,
+                children: renderHint({
+                    getLinkElement,
+                    getUrl,
+                    getEditor
+                })
             }), document.body)
         ]
     });

package/dist/plugins/LinksPlugin/styles_module.css

@@ -33,10 +33,11 @@
 }
 
 .link-I7FEHR {
+  padding-right: 1px;
   position: relative;
 
   & a {
-    color: var(--link-color, #21afec);
+    color: #21afec;
   }
 }
 

package/dist/plugins/ListsPlugin/ListsPlugin.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Editor, Element, Node, Transforms } from "slate";
+import { Editor, Element, Node, Path, Transforms } from "slate";
 import { jsx as external_slate_hyperscript_jsx } from "slate-hyperscript";
 import styles_module from "./styles.module.js";
 class ListsPlugin {
@@ -48,6 +48,7 @@ class ListsPlugin {
                 });
             }
             if (this.isList(editor, node)) {
+                if (!Path.hasPrevious(path)) return void normalizeNode(entry);
                 const prevListItemPath = Editor.before(editor, path, {
                     unit: 'block'
                 });

package/dist/plugins/TableOfContentsPlugin/TableOfContentsPlugin.js

@@ -49,7 +49,8 @@ class TableOfContentsPlugin {
                 event.preventDefault();
                 const element = ReactEditor.toDOMNode(params.editor, node);
                 element?.scrollIntoView({
-                    behavior: 'smooth'
+                    behavior: 'smooth',
+                    block: 'nearest'
                 });
             };
             return /*#__PURE__*/ jsx("div", {

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
-import type { DecoratedRange, Descendant, Editor, NodeEntry } from 'slate';
+import type { DecoratedRange, Descendant, Editor, NodeEntry, NodeMatch } from 'slate';
 import type { RenderElementProps, RenderLeafProps } from 'slate-react';
 import type { CustomElement, CustomText } from '../types';
 export interface IPlugin<TEditor extends Editor = Editor, TBlock extends CustomElement = CustomElement, TLeaf extends CustomText = CustomText> {
@@ -46,6 +46,9 @@ export type UiParams = {
 export type EditorRef = {
     serialize: (node: CustomElement | CustomText) => string;
     deserialize: (element: HTMLElement) => (Descendant | string)[] | string | Descendant | null;
+    isEmpty: () => boolean;
+    deleteNode: (match: NodeMatch<CustomElement>) => void;
+    focus: (mode?: 'end') => void;
 };
 export type Serialize = (node: CustomElement | CustomText, children?: string) => string | undefined;
 export type Deserialize = (element: HTMLElement, children?: (string | Descendant)[]) => CustomElement | CustomText[] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@use-kona/editor",
-  "version": "0.1.8-rc.8",
+  "version": "0.1.9",
   "type": "module",
   "exports": {
     ".": "./src/index.ts"

package/src/core/createEditable.tsx

@@ -154,14 +154,16 @@ export const createEditable =
         }
 
         return (
-          <>
+          <div className={styles.ui} onClick={(event) => {
+            event.stopPropagation();
+          }}>
             {ui.map((p, index) => (
               <React.Fragment key={index}>
                 {p.ui!({ readOnly, children, editor })}
               </React.Fragment>
             ))}
             <div className={styles.editor}>{children}</div>
-          </>
+          </div>
         );
       },
       [editor, plugins.filter],

package/src/core/styles.module.css

@@ -3,12 +3,18 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  min-height: 0;
   color: var(--kona-editor-text-color, #444);
   background-color: var(--kona-editor-background-color, #fff);
 }
 
+.ui {
+  height: 100%;
+}
+
 .editor {
   outline: none;
+  height: 100%;
   overflow: auto;
 
   &::-webkit-scrollbar {

package/src/editor.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
-import { type Descendant, type NodeMatch, Transforms } from 'slate';
+import {type Descendant, Editor, type NodeMatch, Transforms} from 'slate';
 import { ReactEditor, Slate } from 'slate-react';
 import type { CustomElement } from '../types';
 import { createEditable } from './core/createEditable';
@@ -36,7 +36,12 @@ export const KonaEditor = forwardRef<EditorRef, KonaEditorProps>(
         isEmpty: () => {
           return isEmpty(editor.children);
         },
-        focus: () => {
+        focus: (mode?: 'end') => {
+          if (mode === 'end') {
+            const endPoint = Editor.end(editor, [])
+            Transforms.select(editor, endPoint)
+          }
+
           ReactEditor.focus(editor);
         },
       };

package/src/plugins/BasicFormattingPlugin/BasicFormattingPlugin.tsx

@@ -63,7 +63,14 @@ export class BasicFormattingPlugin
           content = <s>{content}</s>;
         }
 
-        return <span {...attributes}>{content}</span>;
+        /**
+         * https://github.com/ianstormtaylor/slate/issues/4704#issuecomment-1006696364
+         */
+        return (
+          <span {...attributes} style={{ paddingRight: '0.001em' }}>
+            {content}
+          </span>
+        );
       },
       serialize: (node: CustomElement | CustomLeaf) => {
         if (Text.isText(node)) {

package/src/plugins/LinksPlugin/Link.tsx

@@ -1,4 +1,5 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import type React from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
   type RenderElementProps,
@@ -36,7 +37,7 @@ export const Link = (props: Props) => {
     }
   };
 
-  const handleMenuClick = (event: React.MouseEvent<HTMLDivElement>) => {
+  const handleMenuClick = () => {
     setOpen(false);
   };
 
@@ -59,7 +60,7 @@ export const Link = (props: Props) => {
   const getEditor = () => editor;
 
   return (
-    <Component ref={ref} className={styles.link} contentEditable={false}>
+    <Component ref={ref} className={styles.link}>
       <a
         {...attributes}
         onClick={handleLinkClick}
@@ -73,21 +74,18 @@ export const Link = (props: Props) => {
       </a>
       {isOpen &&
         createPortal(
-          <>
-            <div className={styles.backdrop} onClick={() => setOpen(false)} />
-            <div
-              contentEditable={false}
-              className={styles.hint}
-              style={style}
-              onMouseUp={handleMenuClick}
-            >
-              {renderHint({
-                getLinkElement,
-                getUrl,
-                getEditor,
-              })}
-            </div>
-          </>,
+          <div
+            contentEditable={false}
+            className={styles.hint}
+            style={style}
+            onMouseUp={handleMenuClick}
+          >
+            {renderHint({
+              getLinkElement,
+              getUrl,
+              getEditor,
+            })}
+          </div>,
           document.body,
         )}
     </Component>

package/src/plugins/LinksPlugin/styles.module.css

@@ -34,9 +34,10 @@
 
 .link {
   position: relative;
+  padding-right: 1px;
 
   a {
-    color: var(--link-color, #21afec);
+    color: #21afec;
   }
 }
 
@@ -69,5 +70,5 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 2
+  z-index: 2;
 }

package/src/plugins/ListsPlugin/ListsPlugin.tsx

@@ -5,13 +5,12 @@ import {
   Element,
   Node,
   type NodeEntry,
-  type Path,
+  Path,
   Transforms,
 } from 'slate';
 import { jsx } from 'slate-hyperscript';
 import type { RenderElementProps } from 'slate-react';
 import type { CustomElement } from '../../../types';
-import { getPrev } from '../../core/queries';
 import type { IPlugin } from '../../types';
 import styles from './styles.module.css';
 
@@ -89,6 +88,11 @@ export class ListsPlugin implements IPlugin {
       }
 
       if (this.isList(editor, node as CustomElement)) {
+        if (!Path.hasPrevious(path)) {
+          normalizeNode(entry);
+          return;
+        }
+
         const prevListItemPath = Editor.before(editor, path, {
           unit: 'block',
         });

package/src/plugins/TableOfContentsPlugin/TableOfContentsPlugin.tsx

@@ -77,6 +77,7 @@ export class TableOfContentsPlugin implements IPlugin {
           ) as HTMLElement;
           element?.scrollIntoView({
             behavior: 'smooth',
+            block: 'nearest'
           });
         };
 

package/src/types.ts

@@ -1,5 +1,5 @@
 import type { KeyboardEvent, ReactElement, ReactNode } from 'react';
-import type { DecoratedRange, Descendant, Editor, NodeEntry } from 'slate';
+import type {DecoratedRange, Descendant, Editor, NodeEntry, NodeMatch} from 'slate';
 import type { RenderElementProps, RenderLeafProps } from 'slate-react';
 import type { CustomElement, CustomText } from '../types';
 
@@ -71,6 +71,9 @@ export type EditorRef = {
   deserialize: (
     element: HTMLElement,
   ) => (Descendant | string)[] | string | Descendant | null;
+  isEmpty: () => boolean;
+  deleteNode: (match: NodeMatch<CustomElement>) => void;
+  focus: (mode?: 'end') => void;
 };
 
 export type Serialize = (