Add external className to slate Link view. (#5188)

plone · Sep 19, 2023 · c1a2552 · c1a2552
1 parent ffa4463
commit c1a2552
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/api/versions.cfg b/api/versions.cfg
@@ -3,3 +3,4 @@
 # Added by buildout at 2021-12-15 17:25:36.097866
 collective.folderishtypes = 3.0.0
 collective.recipe.plonesite = 1.12.0
+pyyaml = 5.3.1 # without this volto is not building locally
diff --git a/news/5109.feature b/news/5109.feature
@@ -0,0 +1 @@
+Add external className to slate Link view. @iFlameing
diff --git a/packages/volto-slate/src/editor/plugins/Link/render.jsx b/packages/volto-slate/src/editor/plugins/Link/render.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
@@ -20,18 +21,16 @@ const ViewLink = ({ url, target, download, children }) => {
 
 export const LinkElement = (props) => {
   const { attributes, children, element, mode = 'edit' } = props;
+  const isInternalUrl = isInternalURL(element.data?.url);
+  const linkUrl = element.data?.url;
 
   return mode === 'view' ? (
     <ViewLink {...(element.data || {})}>{children}</ViewLink>
   ) : (
     <a
       {...attributes}
-      className="slate-editor-link"
-      href={
-        isInternalURL(element.data?.url)
-          ? flattenToAppURL(element.data?.url)
-          : element.data?.url
-      }
+      className={cx('slate-editor-link', { external: !isInternalUrl })}
+      href={isInternalUrl ? flattenToAppURL(linkUrl) : linkUrl}
       onClick={(e) => e.preventDefault()}
     >
       {Array.isArray(children)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Add external className to slate Link view. @iFlameing