[Part 1] Port Auto Link

demo/scripts/controlsV2/sidePane/editorOptions/getDefaultContentEditFeatureSettings.ts

@@ -2,22 +2,6 @@ import { ContentEditFeatureSettings } from 'roosterjs-editor-types';
 import { getAllFeatures } from 'roosterjs-editor-plugins';
 import { getObjectKeys } from 'roosterjs-content-model-dom';
 
-const listFeatures = {
-    autoBullet: false,
-    indentWhenTab: false,
-    outdentWhenShiftTab: false,
-    outdentWhenBackspaceOnEmptyFirstLine: false,
-    outdentWhenEnterOnEmptyLine: false,
-    mergeInNewLineWhenBackspaceOnFirstChar: false,
-    maintainListChain: false,
-    maintainListChainWhenDelete: false,
-    autoNumberingList: false,
-    autoBulletList: false,
-    mergeListOnBackspaceAfterList: false,
-    outdentWhenAltShiftLeft: false,
-    indentWhenAltShiftRight: false,
-};
-
 export function getDefaultContentEditFeatureSettings(): ContentEditFeatureSettings {
     const allFeatures = getAllFeatures();
 
@@ -26,6 +10,5 @@ export function getDefaultContentEditFeatureSettings(): ContentEditFeatureSettin
             settings[key] = !allFeatures[key].defaultDisabled;
             return settings;
         }, <ContentEditFeatureSettings>{}),
-        ...listFeatures,
     };
 }

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

@@ -51,3 +51,4 @@ export { formatSegmentWithContentModel } from './publicApi/utils/formatSegmentWi
 export { setListType } from './modelApi/list/setListType';
 export { findListItemsInSameThread } from './modelApi/list/findListItemsInSameThread';
 export { setModelIndentation } from './modelApi/block/setModelIndentation';
+export { matchLink } from './modelApi/link/matchLink';

packages/roosterjs-content-model-api/lib/modelApi/link/matchLink.ts

@@ -1,24 +1,5 @@
 import { getObjectKeys } from 'roosterjs-content-model-dom';
-
-/**
- * @internal
- */
-export interface LinkData {
-    /**
-     * Schema of a hyperlink
-     */
-    scheme: string;
-
-    /**
-     * Original url of a hyperlink
-     */
-    originalUrl: string;
-
-    /**
-     * Normalized url of a hyperlink
-     */
-    normalizedUrl: string;
-}
+import type { LinkData } from 'roosterjs-content-model-types';
 
 interface LinkMatchRule {
     match: RegExp;
@@ -85,7 +66,6 @@ const linkMatchRules: Record<string, LinkMatchRule> = {
 };
 
 /**
- * @internal
  * Try to match a given string with link match rules, return matched link
  * @param url Input url to match
  * @param option Link match option, exact or partial. If it is exact match, we need

packages/roosterjs-content-model-api/test/modelApi/link/matchLinkTest.ts

@@ -1,4 +1,5 @@
-import { LinkData, matchLink } from '../../../lib/modelApi/link/matchLink';
+import { matchLink } from '../../../lib/modelApi/link/matchLink';
+import type { LinkData } from 'roosterjs-content-model-types';
 
 function runMatchTestWithValidLink(link: string, expected: LinkData): void {
     let resultData = matchLink(link);

packages/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts

@@ -1,5 +1,8 @@
-import { keyboardListTrigger } from './keyboardListTrigger';
+import { createLink } from './link/createLink';
+import { keyboardListTrigger } from './list/keyboardListTrigger';
+import { unlink } from './link/unlink';
 import type {
+    ContentChangedEvent,
     EditorPlugin,
     IEditor,
     KeyDownEvent,
@@ -19,6 +22,16 @@ export type AutoFormatOptions = {
      * When true, after type 1, A, a, i, I followed by ., ), - or between () and space key a type of numbering list will be triggered. @default true
      */
     autoNumbering: boolean;
+
+    /**
+     * When press backspace before a link, remove the hyperlink
+     */
+    autoUnlink: boolean;
+
+    /**
+     * When paste content, create hyperlink for the pasted link
+     */
+    autoLink: boolean;
 };
 
 /**
@@ -27,6 +40,8 @@ export type AutoFormatOptions = {
 const DefaultOptions: Required<AutoFormatOptions> = {
     autoBullet: true,
     autoNumbering: true,
+    autoUnlink: false,
+    autoLink: true,
 };
 
 /**
@@ -81,21 +96,37 @@ export class AutoFormatPlugin implements EditorPlugin {
                 case 'keyDown':
                     this.handleKeyDownEvent(this.editor, event);
                     break;
+                case 'contentChanged':
+                    this.handleContentChangedEvent(this.editor, event);
+                    break;
             }
         }
     }
 
     private handleKeyDownEvent(editor: IEditor, event: KeyDownEvent) {
         const rawEvent = event.rawEvent;
         if (!rawEvent.defaultPrevented && !event.handledByEditFeature) {
+            const { autoBullet, autoNumbering, autoUnlink } = this.options;
             switch (rawEvent.key) {
                 case ' ':
-                    const { autoBullet, autoNumbering } = this.options;
                     if (autoBullet || autoNumbering) {
                         keyboardListTrigger(editor, rawEvent, autoBullet, autoNumbering);
                     }
+                    break;
+                case 'Backspace':
+                    if (autoUnlink) {
+                        unlink(editor, rawEvent);
+                    }
+
                     break;
             }
         }
     }
+
+    private handleContentChangedEvent(editor: IEditor, event: ContentChangedEvent) {
+        const { autoLink } = this.options;
+        if (event.source == 'Paste' && autoLink) {
+            createLink(editor);
+        }
+    }
 }

packages/roosterjs-content-model-plugins/lib/autoFormat/link/createLink.ts

@@ -0,0 +1,25 @@
+import { addLink } from 'roosterjs-content-model-dom';
+import { getLinkSegment } from './getLinkSegment';
+import type { IEditor } from 'roosterjs-content-model-types';
+
+/**
+ * @internal
+ */
+export function createLink(editor: IEditor) {
+    editor.formatContentModel(model => {
+        const link = getLinkSegment(model);
+        if (link && !link.link) {
+            addLink(link, {
+                format: {
+                    href: link.text,
+                    underline: true,
+                },
+                dataset: {},
+            });
+
+            return true;
+        }
+
+        return false;
+    });
+}

packages/roosterjs-content-model-plugins/lib/autoFormat/link/getLinkSegment.ts

@@ -0,0 +1,29 @@
+import { getSelectedSegmentsAndParagraphs } from 'roosterjs-content-model-core';
+import { matchLink } from 'roosterjs-content-model-api';
+import type { ContentModelDocument } from 'roosterjs-content-model-types';
+
+/**
+ * @internal
+ */
+export function getLinkSegment(model: ContentModelDocument) {
+    const selectedSegmentsAndParagraphs = getSelectedSegmentsAndParagraphs(
+        model,
+        false /* includingFormatHolder */
+    );
+    if (selectedSegmentsAndParagraphs.length == 1 && selectedSegmentsAndParagraphs[0][1]) {
+        const selectedParagraph = selectedSegmentsAndParagraphs[0][1];
+        const marker = selectedParagraph.segments[selectedParagraph.segments.length - 1];
+        const link = selectedParagraph.segments[selectedParagraph.segments.length - 2];
+        if (
+            marker &&
+            link &&
+            marker.segmentType === 'SelectionMarker' &&
+            marker.isSelected &&
+            link.segmentType === 'Text' &&
+            (matchLink(link.text) || link.link)
+        ) {
+            return link;
+        }
+    }
+    return undefined;
+}

packages/roosterjs-content-model-plugins/lib/autoFormat/link/unlink.ts

@@ -0,0 +1,18 @@
+import { getLinkSegment } from './getLinkSegment';
+import type { IEditor } from 'roosterjs-content-model-types';
+
+/**
+ * @internal
+ */
+export function unlink(editor: IEditor, rawEvent: KeyboardEvent) {
+    editor.formatContentModel(model => {
+        const link = getLinkSegment(model);
+        if (link?.link) {
+            link.link = undefined;
+            rawEvent.preventDefault();
+            return true;
+        }
+
+        return false;
+    });
+}

packages/roosterjs-content-model-plugins/lib/autoFormat/keyboardListTrigger.ts → packages/roosterjs-content-model-plugins/lib/autoFormat/list/keyboardListTrigger.ts

@@ -1,4 +1,4 @@
-import { getListTypeStyle } from './utils/getListTypeStyle';
+import { getListTypeStyle } from './getListTypeStyle';
 import { getSelectedSegmentsAndParagraphs } from 'roosterjs-content-model-core';
 import { normalizeContentModel } from 'roosterjs-content-model-dom';
 import { setListStartNumber, setListStyle, setListType } from 'roosterjs-content-model-api';