link tool UX is improved with additional props

package.json

@@ -9,7 +9,7 @@
   ],
   "private": true,
   "scripts": {
-    "start": "yarn lerna run start --parallel --ignore development",
+    "start": "yarn lerna run start --scope @yoopta/editor --scope @yoopta/link-tool --scope @yoopta/toolbar --scope @yoopta/link --parallel --ignore development",
     "build": "yarn clean && yarn lerna run build --parallel --ignore development",
     "clean": "find ./packages -type d -name dist ! -path './packages/development/*' -exec rm -rf {} +",
     "serve": "yarn lerna run dev --scope=development",

packages/core/editor/src/plugins/extenstions/withInlines.ts

@@ -37,7 +37,7 @@ const addLink = (editor, url: string) => {
     props: {
       url,
       target: '_blank',
-      rel: 'noreferrer',
+      rel: 'noopener noreferrer',
     },
   };
 

packages/plugins/link/src/plugin/index.tsx

@@ -10,7 +10,7 @@ const Link = new YooptaPlugin<LinkPluginElementKeys, LinkElementProps>({
       props: {
         url: null,
         target: '_blank',
-        rel: 'noreferrer',
+        rel: 'noopener noreferrer',
         nodeType: 'inline',
         title: null,
       },

packages/plugins/link/src/ui/LinkRender.tsx

@@ -1,25 +1,40 @@
 import { PluginElementRenderProps, useYooptaReadOnly } from '@yoopta/editor';
+import { LinkElementProps } from '../types';
+
+const VALID_TARGET_VALUES = ['_blank', '_self', '_parent', '_top', 'framename'];
 
 const LinkRender = (props: PluginElementRenderProps) => {
   const { className = '', ...htmlAttrs } = props.HTMLAttributes || {};
 
-  const { url, target, rel } = props.element.props || {};
+  const { url, target = '', rel } = props.element.props || {};
   const isReadOnly = useYooptaReadOnly();
 
   const onClick = (e) => {
     if (isReadOnly) return;
     e.preventDefault();
   };
 
+  const linkProps: Partial<Pick<LinkElementProps, 'rel' | 'target'>> = {
+    rel,
+    target,
+  };
+
+  if (!VALID_TARGET_VALUES.includes(target)) {
+    delete linkProps.target;
+  }
+
+  if (typeof rel !== 'string' || rel?.length === 0) {
+    delete linkProps.rel;
+  }
+
   return (
     <a
       data-element-type={props.element.type}
       draggable={false}
       href={url || ''}
-      rel={rel}
-      target={target}
       onClick={onClick}
       className={`yoopta-link ${className}`}
+      {...linkProps}
       {...htmlAttrs}
       {...props.attributes}
     >

packages/tools/link-tool/src/components/DefaultLinkToolRender.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, useEffect, useState } from 'react';
 import { LinkToolRenderProps, Link } from '../types';
+import ChevronUp from '../icons/chevronup.svg';
 
 const DEFAULT_LINK_VALUE: Link = {
   url: '',
@@ -19,6 +20,7 @@ function isUrl(string: any): boolean {
 
 const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
   const [link, setLink] = useState(props?.link || DEFAULT_LINK_VALUE);
+  const [additionalPropsOpen, setAdditionPropsOpen] = useState(false);
 
   const onChange = (e: ChangeEvent) => {
     const target = e.target as HTMLInputElement;
@@ -39,18 +41,15 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
   };
 
   return (
-    <div className="yoo-link-tool-min-w-[340px] yoo-link-tool-bg-[#FFFFFF] yoo-link-tool-flex yoo-link-tool-flex-col yoo-link-tool-z-50 yoo-link-tool-p-[10px] yoo-link-tool-rounded-md yoo-link-tool-shadow-md yoo-link-tool-border-solid yoo-link-tool-border-[1px] yoo-link-tool-border-[#e5e7eb] yoo-link-tool-shadow-y-[4px]">
+    <div className="yoopta-link-tool yoo-link-tool-shadow-y-[4px]">
       <div className="">
-        <label
-          htmlFor="title"
-          className="yoo-link-tool-text-xs yoo-link-tool-font-medium yoo-link-tool-text-gray-500 yoo-link-tool-block yoo-link-tool-mb-[5px]"
-        >
+        <label htmlFor="title" className="yoopta-link-tool-label">
           Link title
         </label>
         <input
           id="title"
           type="text"
-          className="yoo-link-tool-text-sm yoo-link-tool-font-medium yoo-link-tool-text-gray-700 yoo-link-tool-border-solid yoo-link-tool-border-[1px] yoo-link-tool-border-[#e5e7eb] yoo-link-tool-rounded-md yoo-link-tool-py-[5px] yoo-link-tool-px-[10px] yoo-link-tool-w-full yoo-link-tool-shadow-sm"
+          className="yoopta-link-tool-input"
           name="title"
           value={link.title}
           onChange={onChange}
@@ -59,23 +58,62 @@ const DefaultLinkToolRender = (props: LinkToolRenderProps) => {
         />
       </div>
       <div className="yoo-link-tool-mt-2">
-        <label
-          htmlFor="url"
-          className="yoo-link-tool-text-xs yoo-link-tool-font-medium yoo-link-tool-text-gray-500 yoo-link-tool-block yoo-link-tool-mb-[5px]"
-        >
+        <label htmlFor="url" className="yoopta-link-tool-label">
           Link URL
         </label>
         <input
           id="url"
           type="text"
-          className="yoo-link-tool-text-sm yoo-link-tool-font-medium yoo-link-tool-text-gray-700 yoo-link-tool-border-solid yoo-link-tool-border-[1px] yoo-link-tool-border-[#e5e7eb] yoo-link-tool-rounded-md yoo-link-tool-py-[5px] yoo-link-tool-px-[10px] yoo-link-tool-w-full yoo-link-tool-shadow-sm"
+          className="yoopta-link-tool-input"
           name="url"
           value={link.url}
           onChange={onChange}
           placeholder="Edit link URL"
           autoComplete="off"
         />
       </div>
+      <button
+        type="button"
+        className="yoopta-link-tool-label !yoo-link-tool-font-[500] yoo-link-tool-mt-2 !yoo-link-tool-mb-0 !yoo-link-tool-flex yoo-link-tool-justify-between yoo-link-tool-items-center yoo-link-tool-w-full"
+        onClick={() => setAdditionPropsOpen((p) => !p)}
+      >
+        Additional props
+        <ChevronUp style={{ transform: additionalPropsOpen ? `rotate(180deg)` : `rotate(0deg)` }} />
+      </button>
+      {additionalPropsOpen && (
+        <>
+          <div className="yoo-link-tool-mt-2">
+            <label htmlFor="target" className="yoopta-link-tool-label">
+              Link target
+            </label>
+            <input
+              id="target"
+              type="text"
+              className="yoopta-link-tool-input"
+              name="target"
+              value={link.target}
+              onChange={onChange}
+              placeholder="Edit link target"
+              autoComplete="off"
+            />
+          </div>
+          <div className="yoo-link-tool-mt-2">
+            <label htmlFor="rel" className="yoopta-link-tool-label">
+              Link rel
+            </label>
+            <input
+              id="rel"
+              type="text"
+              className="yoopta-link-tool-input"
+              name="rel"
+              value={link.rel}
+              onChange={onChange}
+              placeholder="Edit link rel"
+              autoComplete="off"
+            />
+          </div>
+        </>
+      )}
       <div className="yoo-link-tool-mt-2 yoo-link-tool-flex yoo-link-tool-justify-between">
         <button
           type="button"

packages/tools/link-tool/src/react-svg.d.ts

@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import { ReactElement, SVGProps } from 'react';
+
+  const content: (props: SVGProps<SVGElement>) => ReactElement;
+  export default content;
+}

packages/tools/link-tool/src/styles.css

@@ -1 +1,13 @@
-@tailwind utilities;
+@tailwind utilities;
+
+.yoopta-link-tool {
+  @apply yoo-link-tool-min-w-[340px] yoo-link-tool-bg-[#FFFFFF] yoo-link-tool-flex yoo-link-tool-flex-col yoo-link-tool-z-50 yoo-link-tool-p-[10px] yoo-link-tool-rounded-md yoo-link-tool-shadow-md yoo-link-tool-border-solid yoo-link-tool-border-[1px] yoo-link-tool-border-[#e5e7eb]
+}
+
+.yoopta-link-tool-label {
+  @apply yoo-link-tool-text-xs yoo-link-tool-font-medium yoo-link-tool-text-gray-500 yoo-link-tool-block yoo-link-tool-mb-[5px]
+}
+
+.yoopta-link-tool-input {
+  @apply yoo-link-tool-text-sm yoo-link-tool-font-medium yoo-link-tool-text-gray-700 yoo-link-tool-border-solid yoo-link-tool-border-[1px] yoo-link-tool-border-[#e5e7eb] yoo-link-tool-rounded-md yoo-link-tool-py-[5px] yoo-link-tool-px-[10px] yoo-link-tool-w-full yoo-link-tool-shadow-sm
+}

packages/tools/toolbar/src/components/DefaultToolbarRender.tsx

@@ -236,14 +236,10 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
   const actionMenuRenderProps = buildActionMenuRenderProps({ editor, onClose: onCloseActionMenu, view: 'small' });
 
   return (
-    <Toolbar.Root className="yoo-toolbar-bg-[#FFFFFF] yoo-toolbar-flex yoo-toolbar-z-50 yoo-toolbar-p-[5px] yoo-toolbar-rounded-md yoo-toolbar-shadow-md yoo-toolbar-border-[1px] yoo-toolbar-border-solid yoo-toolbar-border-[#e3e3e3] yoo-toolbar-shadow-y-[4px]">
-      <Toolbar.ToggleGroup
-        className="yoo-toolbar-flex yoo-toolbar-items-center"
-        type="single"
-        aria-label="Block formatting"
-      >
+    <Toolbar.Root className="yoopta-toolbar-root">
+      <Toolbar.ToggleGroup className="yoopta-toolbar-group" type="single" aria-label="Block formatting">
         <Toolbar.ToggleItem
-          className="yoopta-button yoo-toolbar-h-full yoo-toolbar-text-[16px] yoo-toolbar-px-[10px] yoo-toolbar-py-0 hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md"
+          className="yoopta-button yoopta-toolbar-item"
           value={blockLabel}
           aria-label={blockLabel}
           ref={actionMenuRefs.setReference}
@@ -260,14 +256,10 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
           )}
         </Toolbar.ToggleItem>
       </Toolbar.ToggleGroup>
-      <Toolbar.Separator className="yoo-toolbar-bg-[#dbd8e0] yoo-toolbar-mx-[6px] yoo-toolbar-my-0 yoo-toolbar-w-[1px]" />
-      <Toolbar.ToggleGroup
-        className="yoo-toolbar-flex yoo-toolbar-items-center"
-        type="single"
-        aria-label="Block formatting"
-      >
+      <Toolbar.Separator className="yoopta-toolbar-separator" />
+      <Toolbar.ToggleGroup className="yoopta-toolbar-group" type="single" aria-label="Block formatting">
         <Toolbar.ToggleItem
-          className="yoopta-button yoo-toolbar-h-full yoo-toolbar-text-[16px] yoo-toolbar-px-[10px] yoo-toolbar-py-0 hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md"
+          className="yoopta-button yoopta-toolbar-item"
           value="LinkTool"
           aria-label="LinkTool"
           ref={linkToolRefs.setReference}
@@ -289,15 +281,11 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
           )}
         </Toolbar.ToggleItem>
       </Toolbar.ToggleGroup>
-      <Toolbar.Separator className="yoo-toolbar-bg-[#dbd8e0] yoo-toolbar-mx-[6px] yoo-toolbar-my-0 yoo-toolbar-w-[1px]" />
-      <Toolbar.ToggleGroup
-        className="yoo-toolbar-flex yoo-toolbar-items-center"
-        type="multiple"
-        aria-label="Text formatting"
-      >
+      <Toolbar.Separator className="yoopta-toolbar-separator" />
+      <Toolbar.ToggleGroup className="yoopta-toolbar-group" type="multiple" aria-label="Text formatting">
         {editor.formats.bold && (
           <Toolbar.ToggleItem
-            className="yoopta-button yoo-toolbar-h-[32px] hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md yoo-toolbar-cursor-pointer yoo-toolbar-inline-flex yoo-toolbar-px-[5px] yoo-toolbar-py-0 yoo-toolbar-items-center yoo-toolbar-justify-center"
+            className="yoopta-button yoopta-toolbar-item-mark"
             value="bold"
             aria-label="Bold"
             style={getItemStyle('bold')}
@@ -308,7 +296,7 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
         )}
         {editor.formats.italic && (
           <Toolbar.ToggleItem
-            className="yoopta-button yoo-toolbar-ml-[2px] yoo-toolbar-h-[32px] hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md yoo-toolbar-cursor-pointer yoo-toolbar-inline-flex yoo-toolbar-px-[5px] yoo-toolbar-py-0 yoo-toolbar-items-center yoo-toolbar-justify-center"
+            className="yoopta-button yoopta-toolbar-item-mark"
             value="italic"
             aria-label="Italic"
             style={getItemStyle('italic')}
@@ -319,7 +307,7 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
         )}
         {editor.formats.underline && (
           <Toolbar.ToggleItem
-            className="yoopta-button yoo-toolbar-ml-[2px] yoo-toolbar-h-[32px] hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md yoo-toolbar-cursor-pointer yoo-toolbar-inline-flex yoo-toolbar-px-[5px] yoo-toolbar-py-0 yoo-toolbar-items-center yoo-toolbar-justify-center"
+            className="yoopta-button yoopta-toolbar-item-mark"
             value="underline"
             aria-label="Underline"
             style={getItemStyle('underline')}
@@ -330,7 +318,7 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
         )}
         {editor.formats.strike && (
           <Toolbar.ToggleItem
-            className="yoopta-button yoo-toolbar-ml-[2px] yoo-toolbar-h-[32px] hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md yoo-toolbar-cursor-pointer yoo-toolbar-inline-flex yoo-toolbar-px-[5px] yoo-toolbar-py-0 yoo-toolbar-items-center yoo-toolbar-justify-center"
+            className="yoopta-button yoopta-toolbar-item-mark"
             value="strike"
             aria-label="Strike"
             style={getItemStyle('strike')}
@@ -342,7 +330,7 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
         )}
         {editor.formats.code && (
           <Toolbar.ToggleItem
-            className="yoopta-button yoo-toolbar-ml-[2px] yoo-toolbar-h-[32px] hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md yoo-toolbar-cursor-pointer yoo-toolbar-inline-flex yoo-toolbar-px-[5px] yoo-toolbar-py-0 yoo-toolbar-items-center yoo-toolbar-justify-center"
+            className="yoopta-button yoopta-toolbar-item-mark"
             value="code"
             aria-label="Code"
             style={getItemStyle('code')}
@@ -364,7 +352,7 @@ const DefaultToolbarRender = ({ activeBlock, editor, toggleHoldToolbar }: Toolba
             )}
 
             <Toolbar.ToggleItem
-              className="yoopta-button yoo-toolbar-ml-[2px] yoo-toolbar-h-[32px] hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md yoo-toolbar-cursor-pointer yoo-toolbar-inline-flex yoo-toolbar-px-[5px] yoo-toolbar-py-0 yoo-toolbar-items-center yoo-toolbar-justify-center"
+              className="yoopta-button yoopta-toolbar-item-mark"
               value="highlight"
               aria-label="Highlight"
               style={getHighlightTriggerStyle()}

packages/tools/toolbar/src/styles.css

@@ -1 +1,22 @@
-@tailwind utilities;
+@tailwind utilities;
+
+.yoopta-toolbar-root {
+  /* @apply yoo-toolbar-bg-[#FFFFFF] yoo-toolbar-flex yoo-toolbar-z-50 yoo-toolbar-p-[5px] yoo-toolbar-rounded-md yoo-toolbar-shadow-md yoo-toolbar-border-[1px] yoo-toolbar-border-solid yoo-toolbar-border-[#e3e3e3] yoo-toolbar-shadow-y-[4px] */
+  @apply yoo-toolbar-bg-[#FFFFFF] yoo-toolbar-flex yoo-toolbar-z-50 yoo-toolbar-p-[5px] yoo-toolbar-rounded-md yoo-toolbar-shadow-md yoo-toolbar-border-[1px] yoo-toolbar-border-solid yoo-toolbar-border-[#e3e3e3]
+}
+
+.yoopta-toolbar-group {
+  @apply yoo-toolbar-flex yoo-toolbar-items-center
+}
+
+.yoopta-toolbar-item {
+  @apply yoo-toolbar-h-full yoo-toolbar-text-[16px] yoo-toolbar-px-[10px] yoo-toolbar-py-0 hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md
+}
+
+.yoopta-toolbar-item-mark {
+  @apply yoo-toolbar-ml-[2px] yoo-toolbar-h-[32px] hover:yoo-toolbar-bg-[#f4f4f5] yoo-toolbar-rounded-md yoo-toolbar-cursor-pointer yoo-toolbar-inline-flex yoo-toolbar-px-[5px] yoo-toolbar-py-0 yoo-toolbar-items-center yoo-toolbar-justify-center
+}
+
+.yoopta-toolbar-separator {
+  @apply yoo-toolbar-bg-[#dbd8e0] yoo-toolbar-mx-[6px] yoo-toolbar-my-0 yoo-toolbar-w-[1px]
+}