Move soft-hyphen functionality to @comet/admin-rte (#1510)

Move the soft-hyphen functionality from `@comet/cms-admin` to
`@comet/admin-rte`. This allows using the soft-hyphen functionality in
plain RTEs, and not only in `RichTextBlock`.

---------

Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>

.changeset/stale-turtles-smile.md

@@ -0,0 +1,31 @@
+---
+"@comet/admin-rte": minor
+"@comet/cms-admin": minor
+---
+
+Move soft-hyphen functionality to `@comet/admin-rte`
+
+This allows using the soft-hyphen functionality in plain RTEs, and not only in `RichTextBlock`
+
+```tsx
+const [useRteApi] = makeRteApi();
+
+export default function MyRte() {
+    const { editorState, setEditorState } = useRteApi();
+    return (
+        <Rte
+            value={editorState}
+            onChange={setEditorState}
+            options={{
+                supports: [
+                    // Soft Hyphen
+                    "soft-hyphen",
+                    // Other options you may wish to support
+                    "bold",
+                    "italic",
+                ],
+            }}
+        />
+    );
+}
+```

packages/admin/admin-rte/src/core/Controls/SpecialCharactersControls.tsx

@@ -2,18 +2,24 @@ import { ButtonGroup } from "@mui/material";
 import * as React from "react";
 
 import NonBreakingSpaceToolbarButton from "../extension/NonBreakingSpace/ToolbarButton";
+import { ToolbarButton as SoftHyphenToolbarButton } from "../extension/SoftHyphen/ToolbarButton";
 import { IControlProps } from "../types";
 
 function SpecialCharactersControls(props: IControlProps) {
     const {
         options: { supports: supportedThings },
     } = props;
 
-    if (!supportedThings.includes("non-breaking-space")) {
+    if (!supportedThings.includes("non-breaking-space") && !supportedThings.includes("soft-hyphen")) {
         return null;
     }
 
-    return <ButtonGroup>{supportedThings.includes("non-breaking-space") && <NonBreakingSpaceToolbarButton {...props} />}</ButtonGroup>;
+    return (
+        <ButtonGroup>
+            {supportedThings.includes("non-breaking-space") && <NonBreakingSpaceToolbarButton {...props} />}
+            {supportedThings.includes("soft-hyphen") && <SoftHyphenToolbarButton {...props} />}
+        </ButtonGroup>
+    );
 }
 
 export default SpecialCharactersControls;

packages/admin/admin-rte/src/core/Rte.tsx

@@ -48,7 +48,8 @@ export type SupportedThings =
     | "history"
     | "link"
     | "links-remove"
-    | "non-breaking-space";
+    | "non-breaking-space"
+    | "soft-hyphen";
 
 export interface IRteOptions {
     supports: SupportedThings[];

packages/admin/cms-admin/src/blocks/rte/extension/SoftHyphen/Decorator.ts → packages/admin/admin-rte/src/core/extension/SoftHyphen/Decorator.ts

@@ -4,7 +4,7 @@ import { EditorComponent } from "./EditorComponent";
 
 const SHY_UNICHAR_REGEX = /\u00ad/g;
 
-export const Decorator: DraftDecorator = {
+const Decorator: DraftDecorator = {
     strategy: (contentBlock, callback) => {
         findWithRegex(SHY_UNICHAR_REGEX, contentBlock, callback);
     },
@@ -19,3 +19,5 @@ function findWithRegex(regex: RegExp, contentBlock: Draft.ContentBlock, callback
         callback(start, start + matchArr[0].length);
     }
 }
+
+export default Decorator;

packages/admin/admin-rte/src/core/extension/SoftHyphen/EditorComponent.tsx

@@ -0,0 +1,29 @@
+import { RteSoftHyphen } from "@comet/admin-icons";
+import { styled } from "@mui/material/styles";
+import { ContentState } from "draft-js";
+import * as React from "react";
+
+interface Props {
+    contentState: ContentState;
+    entityKey: string;
+    children?: React.ReactNode;
+}
+
+//TODO: Allow text selection for SoftHyphen
+export function EditorComponent({ children }: Props): React.ReactElement {
+    return (
+        <span>
+            <VisibleHyphen />
+            {children}
+        </span>
+    );
+}
+
+const VisibleHyphen = styled(RteSoftHyphen)`
+    font-size: inherit;
+    color: currentcolor;
+    opacity: 0.5;
+
+    // Arbitrary value to make the icon look centered
+    padding-top: 0.2em;
+`;

packages/admin/cms-admin/src/blocks/rte/extension/SoftHyphen/ToolbarButton.tsx → packages/admin/admin-rte/src/core/extension/SoftHyphen/ToolbarButton.tsx

@@ -1,11 +1,12 @@
 import { RteSoftHyphen } from "@comet/admin-icons";
-import { ControlButton } from "@comet/admin-rte";
-import { IControlProps } from "@comet/admin-rte/lib/core/types"; //@TODO export from RTE
 import Tooltip from "@mui/material/Tooltip";
 import { EditorState, Modifier } from "draft-js";
 import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
+import ControlButton from "../../Controls/ControlButton";
+import { IControlProps } from "../../types";
+
 const SHY_UNICODE_CHAR = 0x00ad;
 
 export function ToolbarButton({ editorState, setEditorState }: IControlProps): React.ReactElement {

packages/admin/admin-rte/src/core/makeRteApi.ts

@@ -5,6 +5,8 @@ import useDebounce from "../useDebounce";
 import usePrevious from "../usePrevious";
 import LinkDecorator from "./extension/Link/Decorator";
 import NonBreakingSpaceDecorator from "./extension/NonBreakingSpace/Decorator";
+import SoftHyphenDecorator from "./extension/SoftHyphen/Decorator";
+
 export interface IMakeRteApiProps<T = any> {
     decorators?: DraftDecorator[];
     parse?: (v: T) => ContentState;
@@ -38,7 +40,7 @@ function makeRteApi<T = any>(o?: IMakeRteApiProps<T>) {
     const { decorators = [LinkDecorator], parse = defaultParseContent, format = defaultFormatContent }: IMakeRteApiProps<T> = o || {};
 
     // Add default decorators
-    decorators.push(NonBreakingSpaceDecorator);
+    decorators.push(NonBreakingSpaceDecorator, SoftHyphenDecorator);
 
     const decorator = new CompositeDecorator(decorators);
 

packages/admin/admin-rte/src/index.ts

@@ -6,6 +6,7 @@ export { default as LinkControls, RteLinkControlsClassKey } from "./core/Control
 export { RteToolbarClassKey, default as Toolbar } from "./core/Controls/Toolbar";
 export { default as LinkDecorator } from "./core/extension/Link/Decorator";
 export { default as NonBreakingSpaceDecorator } from "./core/extension/NonBreakingSpace/Decorator";
+export { default as SoftHyphenDecorator } from "./core/extension/SoftHyphen/Decorator";
 export { default as filterEditorStateDefault } from "./core/filterEditor/default";
 export { default as filterEditorStateRemoveUnsupportedBlockTypes } from "./core/filterEditor/removeUnsupportedBlockTypes";
 export { default as filterEditorStateRemoveUnsupportedEntities } from "./core/filterEditor/removeUnsupportedEntities";

packages/admin/admin-stories/src/admin-rte/RteAllOptions.tsx

@@ -54,6 +54,7 @@ export const rteOptions: IRteOptions = {
         "link",
         "links-remove",
         "non-breaking-space",
+        "soft-hyphen",
     ],
     listLevelMax: 2,
     blocktypeMap: {

packages/admin/cms-admin/src/blocks/createRichTextBlock.tsx

@@ -17,15 +17,13 @@ import { FormattedMessage } from "react-intl";
 import { RichTextBlockData, RichTextBlockInput } from "../blocks.generated";
 import { createCmsLinkToolbarButton } from "./rte/extension/CmsLink/createCmsLinkToolbarButton";
 import { Decorator as CmsLinkDecorator } from "./rte/extension/CmsLink/Decorator";
-import { Decorator as SoftHyphenDecorator } from "./rte/extension/SoftHyphen/Decorator";
-import { ToolbarButton as SoftHyphenToolbarButton } from "./rte/extension/SoftHyphen/ToolbarButton";
 
 export interface RichTextBlockState {
     editorState: EditorState;
 }
 
 const [, { createEmptyState, createStateFromRawContent, convertStateToRawContent }] = makeRteApi<RawDraftContentState>({
-    decorators: [CmsLinkDecorator, SoftHyphenDecorator],
+    decorators: [CmsLinkDecorator],
     // @TODO: implement a compound decorator in rte
     // like https://jsfiddle.net/paulyoung85/2unzgt68/
     // https://github.com/facebook/draft-js/issues/542#issuecomment-275996606
@@ -120,14 +118,14 @@ export const createRichTextBlock = (
             "link",
             "links-remove",
             "non-breaking-space",
+            "soft-hyphen",
         ],
         draftJsProps: {
             spellCheck: true,
         },
         standardBlockType: "unstyled",
 
         overwriteLinkButton: CmsLinkToolbarButton,
-        customToolbarButtons: [SoftHyphenToolbarButton],
     };
     const LinkBlock = options.link;
     const rteOptions = { ...defaultRteOptions, ...(options.rte ?? {}) };