Support undeletable anchor Step 2: Add undeletable property to link (#2971)

* Support undeletable anchor Step 1: Support hidden properties

* Support undeletable anchor step 2

* improve comments

Author: JiuqingSong

demo/scripts/controlsV2/mainPane/MainPane.tsx

@@ -4,6 +4,7 @@ import SampleEntityPlugin from '../plugins/SampleEntityPlugin';
 import { ApiPlaygroundPlugin } from '../sidePane/apiPlayground/ApiPlaygroundPlugin';
 import { ContentModelPanePlugin } from '../sidePane/contentModel/ContentModelPanePlugin';
 import { darkModeButton } from '../demoButtons/darkModeButton';
+import { defaultDomToModelOption } from '../options/defaultDomToModelOption';
 import { Editor } from 'roosterjs-content-model-core';
 import { EditorOptionsPlugin } from '../sidePane/editorOptions/EditorOptionsPlugin';
 import { EventViewPlugin } from '../sidePane/eventViewer/EventViewPlugin';
@@ -27,6 +28,7 @@ import { SnapshotPlugin } from '../sidePane/snapshot/SnapshotPlugin';
 import { ThemeProvider } from '@fluentui/react/lib/Theme';
 import { TitleBar } from '../titleBar/TitleBar';
 import { trustedHTMLHandler } from '../../utils/trustedHTMLHandler';
+import { undeletableLinkChecker } from '../options/demoUndeletableAnchorParser';
 import { UpdateContentPlugin } from '../plugins/UpdateContentPlugin';
 import { WindowProvider } from '@fluentui/react/lib/WindowProvider';
 import { zoomButton } from '../demoButtons/zoomButton';
@@ -377,6 +379,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                             experimentalFeatures={Array.from(
                                 this.state.initState.experimentalFeatures
                             )}
+                            defaultDomToModelOptions={defaultDomToModelOption}
                         />
                     )}
                 </div>
@@ -528,7 +531,10 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                         : linkTitle
                 ),
             pluginList.customReplace && new CustomReplacePlugin(customReplacements),
-            pluginList.hiddenProperty && new HiddenPropertyPlugin({}),
+            pluginList.hiddenProperty &&
+                new HiddenPropertyPlugin({
+                    undeletableLinkChecker: undeletableLinkChecker,
+                }),
         ].filter(x => !!x);
     }
 }

demo/scripts/controlsV2/options/defaultDomToModelOption.ts

@@ -0,0 +1,8 @@
+import { demoUndeletableAnchorParser } from './demoUndeletableAnchorParser';
+import { DomToModelOption } from 'roosterjs-content-model-types';
+
+export const defaultDomToModelOption: DomToModelOption = {
+    additionalFormatParsers: {
+        link: [demoUndeletableAnchorParser],
+    },
+};

demo/scripts/controlsV2/options/demoUndeletableAnchorParser.ts

@@ -0,0 +1,13 @@
+import { FormatParser, UndeletableFormat } from 'roosterjs-content-model-types';
+
+const DemoUndeletableName = 'DemoUndeletable';
+
+export function undeletableLinkChecker(a: HTMLAnchorElement): boolean {
+    return a.getAttribute('name') == DemoUndeletableName;
+}
+
+export const demoUndeletableAnchorParser: FormatParser<UndeletableFormat> = (format, element) => {
+    if (undeletableLinkChecker(element as HTMLAnchorElement)) {
+        format.undeletable = true;
+    }
+};

packages/roosterjs-content-model-dom/lib/domUtils/hiddenProperties/hiddenProperty.ts

@@ -2,9 +2,10 @@
  * @internal
  */
 export interface HiddenProperty {
-    dummy?: {}; // Temp used by test, will be removed later
-
-    // TODO: Add more properties as needed
+    /**
+     * Specify we should not delete this element when delete/backspace key is pressed
+     */
+    undeletable?: boolean;
 }
 
 interface NodeWithHiddenProperty extends Node {

packages/roosterjs-content-model-dom/lib/domUtils/hiddenProperties/undeletableLink.ts

@@ -0,0 +1,24 @@
+import { getHiddenProperty, setHiddenProperty } from './hiddenProperty';
+import type { HiddenProperty } from './hiddenProperty';
+
+const UndeletableLinkKey: keyof HiddenProperty = 'undeletable';
+
+/**
+ * Set a hidden property on a link element to indicate whether it is undeletable or not.
+ * This is used to prevent the link from being deleted when the user tries to delete it.
+ * @param a The link element to set the property on
+ * @param undeletable Whether the link is undeletable or not
+ */
+export function setLinkUndeletable(a: HTMLAnchorElement, undeletable: boolean) {
+    setHiddenProperty(a, UndeletableLinkKey, undeletable);
+}
+
+/**
+ * Check if a link element is undeletable or not.
+ * This is used to determine if the link can be deleted when the user tries to delete it.
+ * @param a The link element to check
+ * @returns True if the link is undeletable, false otherwise
+ */
+export function isLinkUndeletable(a: HTMLAnchorElement): boolean {
+    return !!getHiddenProperty(a, UndeletableLinkKey);
+}

packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts

@@ -32,6 +32,7 @@ import { textAlignFormatHandler } from './block/textAlignFormatHandler';
 import { textColorFormatHandler } from './segment/textColorFormatHandler';
 import { textColorOnTableCellFormatHandler } from './table/textColorOnTableCellFormatHandler';
 import { textIndentFormatHandler } from './block/textIndentFormatHandler';
+import { undeletableLinkFormatHandler } from './segment/undeletableLinkFormatHandler';
 import { underlineFormatHandler } from './segment/underlineFormatHandler';
 import { verticalAlignFormatHandler } from './common/verticalAlignFormatHandler';
 import { whiteSpaceFormatHandler } from './block/whiteSpaceFormatHandler';
@@ -85,6 +86,7 @@ const defaultFormatHandlerMap: FormatHandlers = {
     textColor: textColorFormatHandler,
     textColorOnTableCell: textColorOnTableCellFormatHandler,
     textIndent: textIndentFormatHandler,
+    undeletableLink: undeletableLinkFormatHandler,
     underline: underlineFormatHandler,
     verticalAlign: verticalAlignFormatHandler,
     whiteSpace: whiteSpaceFormatHandler,
@@ -200,6 +202,7 @@ export const defaultFormatKeysPerCategory: {
         'border',
         'size',
         'textAlign',
+        'undeletableLink',
     ],
     segmentUnderLink: ['textColor'],
     code: ['fontFamily', 'display'],

packages/roosterjs-content-model-dom/lib/formatHandlers/segment/undeletableLinkFormatHandler.ts

@@ -0,0 +1,24 @@
+import { isElementOfType } from '../../domUtils/isElementOfType';
+import {
+    isLinkUndeletable,
+    setLinkUndeletable,
+} from '../../domUtils/hiddenProperties/undeletableLink';
+import type { UndeletableFormat } from 'roosterjs-content-model-types';
+import type { FormatHandler } from '../FormatHandler';
+
+/**
+ * @internal
+ */
+export const undeletableLinkFormatHandler: FormatHandler<UndeletableFormat> = {
+    parse: (format, element) => {
+        if (isElementOfType(element, 'a') && isLinkUndeletable(element)) {
+            format.undeletable = true;
+        }
+    },
+
+    apply: (format, element) => {
+        if (format.undeletable && isElementOfType(element, 'a')) {
+            setLinkUndeletable(element, true);
+        }
+    },
+};

packages/roosterjs-content-model-dom/lib/index.ts

@@ -39,6 +39,8 @@ export { reuseCachedElement } from './domUtils/reuseCachedElement';
 export { isWhiteSpacePreserved } from './domUtils/isWhiteSpacePreserved';
 export { normalizeRect } from './domUtils/normalizeRect';
 
+export { setLinkUndeletable, isLinkUndeletable } from './domUtils/hiddenProperties/undeletableLink';
+
 export { createBr } from './modelApi/creators/createBr';
 export { createListItem } from './modelApi/creators/createListItem';
 export { createFormatContainer } from './modelApi/creators/createFormatContainer';

packages/roosterjs-content-model-dom/test/domUtils/hiddenProperties/undeletableLinkTest.ts

@@ -0,0 +1,36 @@
+import {
+    isLinkUndeletable,
+    setLinkUndeletable,
+} from '../../../lib/domUtils/hiddenProperties/undeletableLink';
+
+describe('setLinkUndeletable', () => {
+    it('should set the undeletable property on the link element', () => {
+        const linkElement = document.createElement('a');
+
+        setLinkUndeletable(linkElement, true);
+
+        expect((linkElement as any).__roosterjsHiddenProperty).toEqual({
+            undeletable: true,
+        });
+
+        setLinkUndeletable(linkElement, false);
+
+        expect((linkElement as any).__roosterjsHiddenProperty).toEqual({
+            undeletable: false,
+        });
+    });
+});
+
+describe('isLinkUndeletable', () => {
+    it('should read link undeletable value', () => {
+        const linkElement = document.createElement('a');
+
+        expect(isLinkUndeletable(linkElement)).toBe(false);
+
+        (linkElement as any).__roosterjsHiddenProperty = {
+            undeletable: true,
+        };
+
+        expect(isLinkUndeletable(linkElement)).toBe(true);
+    });
+});

packages/roosterjs-content-model-dom/test/formatHandlers/segment/undeletableLinkFormatHandlerTest.ts

@@ -0,0 +1,78 @@
+import { UndeletableFormat } from 'roosterjs-content-model-types';
+import { undeletableLinkFormatHandler } from '../../../lib/formatHandlers/segment/undeletableLinkFormatHandler';
+
+describe('undeletableLinkFormatHandler.parse', () => {
+    it('parse from other node', () => {
+        const div = document.createElement('div');
+        const format: UndeletableFormat = {};
+
+        undeletableLinkFormatHandler.parse(format, div, {} as any, {});
+
+        expect(format).toEqual({});
+    });
+
+    it('parse from a', () => {
+        const a = document.createElement('a');
+        const format: UndeletableFormat = {};
+
+        undeletableLinkFormatHandler.parse(format, a, {} as any, {});
+
+        expect(format).toEqual({});
+    });
+
+    it('parse from a with the hidden property', () => {
+        const a = document.createElement('a');
+        const format: UndeletableFormat = {};
+
+        (a as any).__roosterjsHiddenProperty = {
+            undeletable: true,
+        };
+
+        undeletableLinkFormatHandler.parse(format, a, {} as any, {});
+
+        expect(format).toEqual({
+            undeletable: true,
+        });
+    });
+});
+
+describe('undeletableLinkFormatHandler.apply', () => {
+    it('apply to other node', () => {
+        const div = document.createElement('div');
+        const format: UndeletableFormat = {
+            undeletable: true,
+        };
+
+        undeletableLinkFormatHandler.apply(format, div, {} as any);
+
+        expect((div as any).__roosterjsHiddenProperty).toBeUndefined();
+    });
+
+    it('apply to a without the hidden property', () => {
+        const a = document.createElement('a');
+        const format: UndeletableFormat = {
+            undeletable: true,
+        };
+
+        undeletableLinkFormatHandler.apply(format, a, {} as any);
+
+        expect((a as any).__roosterjsHiddenProperty).toEqual({
+            undeletable: true,
+        });
+    });
+
+    it('apply to a with the hidden property', () => {
+        const a = document.createElement('a');
+        const format: UndeletableFormat = {};
+
+        (a as any).__roosterjsHiddenProperty = {
+            test: 'value',
+        };
+
+        undeletableLinkFormatHandler.apply(format, a, {} as any);
+
+        expect((a as any).__roosterjsHiddenProperty).toEqual({
+            test: 'value',
+        });
+    });
+});