@yoopta/link 1.9.8-rc → 1.9.9-rc

package/dist/index.js

@@ -1,302 +1 @@
-import { jsx } from 'react/jsx-runtime';
-import { Transforms, Editor, Element, Range, Node } from 'slate';
-import { isElementActive, generateId, cx, HOTKEYS, createYooptaPlugin, getElementByPath, getElementClassname } from '@yoopta/editor';
-import { useState, useEffect } from 'react';
-
-/**
- * Expose `isUrl`.
- */
-
-var isUrl_1 = isUrl;
-
-/**
- * RegExps.
- * A URL must match #1 and then at least one of #2/#3.
- * Use two levels of REs to avoid REDOS.
- */
-
-var protocolAndDomainRE = /^(?:\w+:)?\/\/(\S+)$/;
-
-var localhostDomainRE = /^localhost[\:?\d]*(?:[^\:?\d]\S*)?$/;
-var nonLocalhostDomainRE = /^[^\s\.]+\.\S{2,}$/;
-
-/**
- * Loosely validate a URL `string`.
- *
- * @param {String} string
- * @return {Boolean}
- */
-
-function isUrl(string){
-  if (typeof string !== 'string') {
-    return false;
-  }
-
-  var match = string.match(protocolAndDomainRE);
-  if (!match) {
-    return false;
-  }
-
-  var everythingAfterProtocol = match[1];
-  if (!everythingAfterProtocol) {
-    return false;
-  }
-
-  if (localhostDomainRE.test(everythingAfterProtocol) ||
-      nonLocalhostDomainRE.test(everythingAfterProtocol)) {
-    return true;
-  }
-
-  return false;
-}
-
-const removeLinkNode = (editor) => {
-    console.log('removeLinkNode editor selection', editor.selection);
-    Transforms.unwrapNodes(editor, {
-        match: (n) => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'link',
-    });
-};
-
-const addLinkNode = (editor, url) => {
-    if (isElementActive(editor, 'link')) {
-        removeLinkNode(editor);
-    }
-    const { selection } = editor;
-    const isCollapsed = selection && Range.isCollapsed(selection);
-    const link = {
-        id: generateId(),
-        type: 'link',
-        data: { url, skipDrag: true },
-        children: isCollapsed ? [{ text: url }] : [],
-        nodeType: 'inline',
-    };
-    if (isCollapsed) {
-        Transforms.insertNodes(editor, link);
-    }
-    else {
-        Transforms.wrapNodes(editor, link, { split: true });
-        Transforms.collapse(editor, { edge: 'end' });
-    }
-};
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$1 = ".LinkEditor-module_link{color:#007aff;cursor:text;font-style:normal;font-weight:400;position:relative;text-decoration-line:underline}.LinkEditor-module_clickable{cursor:pointer}";
-var s$1 = {"link":"LinkEditor-module_link","clickable":"LinkEditor-module_clickable"};
-styleInject(css_248z$1);
-
-const LinkEditor = ({ attributes, element, children, HTMLAttributes }) => {
-    const [hovered, setHovered] = useState(false);
-    const [clickable, setClickable] = useState(false);
-    const handleClick = (e) => {
-        var _a;
-        if (clickable && typeof element.data.url === 'string' && ((_a = element.data.url) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            window.open(element.data.url, '_blank');
-            return;
-        }
-        return e.preventDefault();
-    };
-    const reset = () => {
-        setClickable(false);
-        setHovered(false);
-    };
-    useEffect(() => {
-        const makeClickable = (event) => {
-            if (HOTKEYS.isCmd(event)) {
-                setClickable(true);
-            }
-        };
-        if (hovered) {
-            document === null || document === void 0 ? void 0 : document.addEventListener('keydown', makeClickable);
-        }
-        return () => {
-            document === null || document === void 0 ? void 0 : document.removeEventListener('keydown', makeClickable);
-        };
-    }, [hovered, clickable]);
-    return (jsx("a", Object.assign({ draggable: false, href: element.data.url || '', rel: "noreferrer", target: "_blank", className: cx(s$1.link, { [s$1.clickable]: clickable && hovered }), onClick: handleClick, onMouseEnter: () => setHovered(true), onMouseLeave: reset }, HTMLAttributes, attributes, { children: children })));
-};
-
-var css_248z = ".Link-module_link{color:#007aff;cursor:pointer;font-style:normal;font-weight:400;position:relative;text-decoration-line:underline}";
-var s = {"link":"Link-module_link"};
-styleInject(css_248z);
-
-const LinkRender = ({ attributes, element, children, HTMLAttributes }) => {
-    const handleClick = (e) => {
-        e.preventDefault();
-        if (!element.data.url)
-            return;
-        const url = new URL(element.data.url);
-        if (url.host === window.location.host) {
-            window.open(element.data.url, '_self');
-        }
-        else {
-            window.open(element.data.url, '_blank');
-        }
-    };
-    return (jsx("a", Object.assign({ draggable: false, href: element.data.url || '', rel: "noreferrer", target: "_blank", onClick: handleClick }, HTMLAttributes, { className: getElementClassname({ element, HTMLAttributes, className: s.link }) }, attributes, { children: children })));
-};
-LinkRender.displayName = 'Link';
-const LINK_NODE_TYPE = 'link';
-const Link = createYooptaPlugin({
-    type: LINK_NODE_TYPE,
-    renderer: {
-        editor: () => LinkEditor,
-        render: LinkRender,
-    },
-    defineElement: () => ({
-        id: generateId(),
-        type: 'link',
-        children: [{ text: '' }],
-        nodeType: 'inline',
-        data: { url: null, skipDrag: true },
-    }),
-    extendEditor(editor) {
-        const { insertData, insertText, isInline, normalizeNode } = editor;
-        editor.isInline = (element) => (element.type === LINK_NODE_TYPE ? true : isInline(element));
-        editor.normalizeNode = (entry) => {
-            var _a, _b;
-            const [node, path] = entry;
-            if (Element.isElement(node) && node.type === LINK_NODE_TYPE) {
-                if (node.children.length > 0 && ((_b = (_a = Node.child(node, 0)) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.length) === 0) {
-                    Transforms.removeNodes(editor, {
-                        at: entry[1],
-                        match: (n) => Element.isElement(n) && n.type === LINK_NODE_TYPE,
-                    });
-                }
-            }
-            normalizeNode(entry);
-        };
-        editor.insertText = (text) => {
-            if (text && isUrl_1(text)) {
-                addLinkNode(editor, text);
-            }
-            else {
-                insertText(text);
-            }
-        };
-        editor.insertData = (data) => {
-            const text = data.getData('text/plain');
-            if (text && isUrl_1(text)) {
-                addLinkNode(editor, text);
-            }
-            else {
-                insertData(data);
-            }
-        };
-        return editor;
-    },
-    events: {
-        onKeyDown: (editor, { hotkeys }) => (event) => {
-            if (!editor.selection)
-                return;
-            const node = getElementByPath(editor, editor.selection.anchor.path);
-            if (node.type !== LINK_NODE_TYPE)
-                return;
-            const { anchor } = editor.selection;
-            if (hotkeys.isEnter(event)) {
-                const isEnd = Editor.isEnd(editor, anchor, anchor.path);
-                const isStart = Editor.isStart(editor, anchor, anchor.path);
-                console.log({ isStart });
-                if (isStart) {
-                    event.preventDefault();
-                    const linkEntry = Editor.above(editor, {
-                        match: (n) => Element.isElement(n) && n.type === LINK_NODE_TYPE,
-                    });
-                    if (!linkEntry)
-                        return;
-                    const [, linkElementPath] = linkEntry;
-                    const parentEntry = Editor.parent(editor, linkElementPath);
-                    const [, parentElementPath] = parentEntry;
-                    Transforms.splitNodes(editor, {
-                        match: (n) => Element.isElement(n),
-                        mode: 'highest',
-                        always: true,
-                    });
-                    Transforms.setNodes(editor, { id: generateId() }, {
-                        at: parentElementPath,
-                        match: (n) => Element.isElement(n),
-                        mode: 'highest',
-                    });
-                    return;
-                }
-                if (isEnd) {
-                    event.preventDefault();
-                    Editor.insertBreak(editor);
-                    Transforms.setNodes(editor, { id: generateId() });
-                    Transforms.removeNodes(editor, {
-                        match: (n) => Element.isElement(n) && Editor.isInline(editor, n) && n.type === LINK_NODE_TYPE,
-                    });
-                    return;
-                }
-                if (!isEnd && !isStart) {
-                    event.preventDefault();
-                    Transforms.splitNodes(editor);
-                    Transforms.setNodes(editor, { id: generateId() });
-                    Transforms.setNodes(editor, { id: generateId() }, { match: (n) => Element.isElement(n) && Editor.isInline(editor, n) && n.type === LINK_NODE_TYPE });
-                }
-                return;
-            }
-            if (hotkeys.isSpace(event)) {
-                const inline = Editor.above(editor, {
-                    match: (n) => Element.isElement(n) && Editor.isInline(editor, n) && n.type === LINK_NODE_TYPE,
-                    mode: 'highest',
-                });
-                if (inline) {
-                    const [, inlinePath] = inline;
-                    if (Editor.isEnd(editor, anchor, inlinePath)) {
-                        const afterPoint = Editor.after(editor, inlinePath);
-                        Transforms.setSelection(editor, {
-                            anchor: afterPoint,
-                            focus: afterPoint,
-                        });
-                    }
-                }
-                return;
-            }
-        },
-    },
-    exports: {
-        markdown: {
-            serialize: (node, text) => `[${text}](${node.data.url})`,
-        },
-        html: {
-            serialize: (node, children) => `<a target="_blank" rel="noopener noreferrer" href="${node.data.url}">${children}</a>`,
-            deserialize: {
-                nodeName: 'A',
-                parse: (el) => {
-                    return {
-                        url: el.getAttribute('href'),
-                        skipDrag: true,
-                    };
-                },
-            },
-        },
-    },
-});
-
-export { Link as default };
+import{jsx as e}from"react/jsx-runtime";import{Transforms as t,Editor as n,Element as r,Range as i,Node as o}from"slate";import{isElementActive as a,generateId as s,cx as l,HOTKEYS as d,createYooptaPlugin as c,getElementByPath as u,getElementClassname as m}from"@yoopta/editor";import{useState as p,useEffect as f}from"react";var h=function(e){if("string"!=typeof e)return!1;var t=e.match(v);if(!t)return!1;var n=t[1];if(!n)return!1;if(g.test(n)||y.test(n))return!0;return!1},v=/^(?:\w+:)?\/\/(\S+)$/,g=/^localhost[\:?\d]*(?:[^\:?\d]\S*)?$/,y=/^[^\s\.]+\.\S{2,}$/;const k=(e,o)=>{a(e,"link")&&(e=>{console.log("removeLinkNode editor selection",e.selection),t.unwrapNodes(e,{match:e=>!n.isEditor(e)&&r.isElement(e)&&"link"===e.type})})(e);const{selection:l}=e,d=l&&i.isCollapsed(l),c={id:s(),type:"link",data:{url:o,skipDrag:!0},children:d?[{text:o}]:[],nodeType:"inline"};d?t.insertNodes(e,c):(t.wrapNodes(e,c,{split:!0}),t.collapse(e,{edge:"end"}))};function w(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var N="RvZCjRoG",E="BcbwmZV8";w(".RvZCjRoG{color:#007aff;cursor:text;font-style:normal;font-weight:400;position:relative;text-decoration-line:underline}.BcbwmZV8{cursor:pointer}");const b=({attributes:t,element:n,children:r,HTMLAttributes:i})=>{const[o,a]=p(!1),[s,c]=p(!1);return f((()=>{const e=e=>{d.isCmd(e)&&c(!0)};return o&&(null===document||void 0===document||document.addEventListener("keydown",e)),()=>{null===document||void 0===document||document.removeEventListener("keydown",e)}}),[o,s]),e("a",Object.assign({draggable:!1,href:n.data.url||"",rel:"noreferrer",target:"_blank",className:l(N,{[E]:s&&o}),onClick:e=>{var t;if(!(s&&"string"==typeof n.data.url&&(null===(t=n.data.url)||void 0===t?void 0:t.length)>0))return e.preventDefault();window.open(n.data.url,"_blank")},onMouseEnter:()=>a(!0),onMouseLeave:()=>{c(!1),a(!1)}},i,t,{children:r}))};var x="WX97Rghx";w(".WX97Rghx{color:#007aff;cursor:pointer;font-style:normal;font-weight:400;position:relative;text-decoration-line:underline}");const D=({attributes:t,element:n,children:r,HTMLAttributes:i})=>e("a",Object.assign({draggable:!1,href:n.data.url||"",rel:"noreferrer",target:"_blank",onClick:e=>{if(e.preventDefault(),!n.data.url)return;new URL(n.data.url).host===window.location.host?window.open(n.data.url,"_self"):window.open(n.data.url,"_blank")}},i,{className:m({element:n,HTMLAttributes:i,className:x})},t,{children:r}));D.displayName="Link";const C="link",T=c({type:C,renderer:{editor:()=>b,render:D},defineElement:()=>({id:s(),type:"link",children:[{text:""}],nodeType:"inline",data:{url:null,skipDrag:!0}}),extendEditor(e){const{insertData:n,insertText:i,isInline:a,normalizeNode:s}=e;return e.isInline=e=>e.type===C||a(e),e.normalizeNode=n=>{var i,a;const[l,d]=n;r.isElement(l)&&l.type===C&&l.children.length>0&&0===(null===(a=null===(i=o.child(l,0))||void 0===i?void 0:i.text)||void 0===a?void 0:a.length)&&t.removeNodes(e,{at:n[1],match:e=>r.isElement(e)&&e.type===C}),s(n)},e.insertText=t=>{t&&h(t)?k(e,t):i(t)},e.insertData=t=>{const r=t.getData("text/plain");r&&h(r)?k(e,r):n(t)},e},events:{onKeyDown:(e,{hotkeys:i})=>o=>{if(!e.selection)return;if(u(e,e.selection.anchor.path).type!==C)return;const{anchor:a}=e.selection;if(i.isEnter(o)){const i=n.isEnd(e,a,a.path),l=n.isStart(e,a,a.path);if(console.log({isStart:l}),l){o.preventDefault();const i=n.above(e,{match:e=>r.isElement(e)&&e.type===C});if(!i)return;const[,a]=i,l=n.parent(e,a),[,d]=l;return t.splitNodes(e,{match:e=>r.isElement(e),mode:"highest",always:!0}),void t.setNodes(e,{id:s()},{at:d,match:e=>r.isElement(e),mode:"highest"})}return i?(o.preventDefault(),n.insertBreak(e),t.setNodes(e,{id:s()}),void t.removeNodes(e,{match:t=>r.isElement(t)&&n.isInline(e,t)&&t.type===C})):void(i||l||(o.preventDefault(),t.splitNodes(e),t.setNodes(e,{id:s()}),t.setNodes(e,{id:s()},{match:t=>r.isElement(t)&&n.isInline(e,t)&&t.type===C})))}if(i.isSpace(o)){const i=n.above(e,{match:t=>r.isElement(t)&&n.isInline(e,t)&&t.type===C,mode:"highest"});if(i){const[,r]=i;if(n.isEnd(e,a,r)){const i=n.after(e,r);t.setSelection(e,{anchor:i,focus:i})}}}else;}},exports:{markdown:{serialize:(e,t)=>`[${t}](${e.data.url})`},html:{serialize:(e,t)=>`<a target="_blank" rel="noopener noreferrer" href="${e.data.url}">${t}</a>`,deserialize:{nodeName:"A",parse:e=>({url:e.getAttribute("href"),skipDrag:!0})}}}});export{T as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/link",
-  "version": "1.9.8-rc",
+  "version": "1.9.9-rc",
   "description": "> TODO: description",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Editor-Yoopta#readme",