@portabletext/plugin-input-rule 0.1.3 → 0.3.0

package/src/rule.markdown-link.ts

@@ -0,0 +1,98 @@
+import type {EditorSchema} from '@portabletext/editor'
+import {raise, type BehaviorAction} from '@portabletext/editor/behaviors'
+import {defineInputRule} from './input-rule'
+
+export function createMarkdownLinkRule(config: {
+  linkObject: (context: {
+    schema: EditorSchema
+    href: string
+  }) => {name: string; value?: {[prop: string]: unknown}} | undefined
+}) {
+  return defineInputRule({
+    on: /\[(.+)]\((.+)\)/,
+    actions: [
+      ({snapshot, event}) => {
+        const newText = event.textBefore + event.textInserted
+        let textLengthDelta = 0
+        const actions: Array<BehaviorAction> = []
+
+        for (const match of event.matches.reverse()) {
+          const textMatch = match.groupMatches.at(0)
+          const hrefMatch = match.groupMatches.at(1)
+
+          if (textMatch === undefined || hrefMatch === undefined) {
+            continue
+          }
+
+          textLengthDelta =
+            textLengthDelta -
+            (match.targetOffsets.focus.offset -
+              match.targetOffsets.anchor.offset -
+              textMatch.text.length)
+
+          const linkObject = config.linkObject({
+            schema: snapshot.context.schema,
+            href: hrefMatch.text,
+          })
+
+          if (!linkObject) {
+            continue
+          }
+
+          const leftSideOffsets = {
+            anchor: match.targetOffsets.anchor,
+            focus: textMatch.targetOffsets.anchor,
+          }
+          const rightSideOffsets = {
+            anchor: textMatch.targetOffsets.focus,
+            focus: match.targetOffsets.focus,
+          }
+
+          actions.push(
+            raise({
+              type: 'select',
+              at: textMatch.targetOffsets,
+            }),
+          )
+          actions.push(
+            raise({
+              type: 'annotation.add',
+              annotation: {
+                name: linkObject.name,
+                value: linkObject.value ?? {},
+              },
+            }),
+          )
+          actions.push(
+            raise({
+              type: 'delete',
+              at: rightSideOffsets,
+            }),
+          )
+          actions.push(
+            raise({
+              type: 'delete',
+              at: leftSideOffsets,
+            }),
+          )
+        }
+
+        const endCaretPosition = {
+          path: event.focusTextBlock.path,
+          offset: newText.length - textLengthDelta * -1,
+        }
+
+        return [
+          ...actions,
+          raise({
+            type: 'select',
+            at: {
+              anchor: endCaretPosition,
+              focus: endCaretPosition,
+            },
+          }),
+        ]
+      },
+    ],
+  })
+}

package/src/text-transform-rule.ts

@@ -1,14 +1,18 @@
-import {raise} from '@portabletext/editor/behaviors'
+import {raise, type BehaviorAction} from '@portabletext/editor/behaviors'
 import {getMarkState} from '@portabletext/editor/selectors'
 import type {InputRule, InputRuleGuard} from './input-rule'
+import type {InputRuleMatchLocation} from './input-rule-match-location'
 
 /**
  * @alpha
  */
-export type TextTransformRule = {
+export type TextTransformRule<TGuardResponse = true> = {
   on: RegExp
-  guard?: InputRuleGuard
-  transform: () => string
+  guard?: InputRuleGuard<TGuardResponse>
+  transform: (
+    {location}: {location: InputRuleMatchLocation},
+    guardResponse: TGuardResponse,
+  ) => string
 }
 
 /**
@@ -25,59 +29,66 @@ export type TextTransformRule = {
  *
  * @alpha
  */
-export function defineTextTransformRule(config: TextTransformRule): InputRule {
+export function defineTextTransformRule<TGuardResponse = true>(
+  config: TextTransformRule<TGuardResponse>,
+): InputRule<TGuardResponse> {
   return {
     on: config.on,
-    guard: config.guard ?? (() => true),
+    guard: config.guard ?? (() => true as TGuardResponse),
     actions: [
-      ({snapshot, event}) => {
-        const matches = event.matches.flatMap((match) =>
+      ({snapshot, event}, guardResponse) => {
+        const locations = event.matches.flatMap((match) =>
           match.groupMatches.length === 0 ? [match] : match.groupMatches,
         )
-        const textLengthDelta = matches.reduce((length, match) => {
-          return (
-            length -
-            (config.transform().length -
-              (match.targetOffsets.focus.offset -
-                match.targetOffsets.anchor.offset))
+        const newText = event.textBefore + event.textInserted
+
+        let textLengthDelta = 0
+        const actions: Array<BehaviorAction> = []
+
+        for (const location of locations.reverse()) {
+          const text = config.transform({location}, guardResponse)
+
+          textLengthDelta =
+            textLengthDelta -
+            (text.length -
+              (location.targetOffsets.focus.offset -
+                location.targetOffsets.anchor.offset))
+
+          actions.push(raise({type: 'select', at: location.targetOffsets}))
+          actions.push(raise({type: 'delete', at: location.targetOffsets}))
+          actions.push(
+            raise({
+              type: 'insert.child',
+              child: {
+                _type: snapshot.context.schema.span.name,
+                text,
+                marks:
+                  getMarkState({
+                    ...snapshot,
+                    context: {
+                      ...snapshot.context,
+                      selection: {
+                        anchor: location.selection.anchor,
+                        focus: {
+                          path: location.selection.focus.path,
+                          offset: Math.min(
+                            location.selection.focus.offset,
+                            event.textBefore.length,
+                          ),
+                        },
+                      },
+                    },
+                  })?.marks ?? [],
+              },
+            }),
           )
-        }, 0)
+        }
 
-        const newText = event.textBefore + event.textInserted
         const endCaretPosition = {
           path: event.focusTextBlock.path,
           offset: newText.length - textLengthDelta,
         }
 
-        const actions = matches.reverse().flatMap((match) => [
-          raise({type: 'select', at: match.targetOffsets}),
-          raise({type: 'delete', at: match.targetOffsets}),
-          raise({
-            type: 'insert.child',
-            child: {
-              _type: snapshot.context.schema.span.name,
-              text: config.transform(),
-              marks:
-                getMarkState({
-                  ...snapshot,
-                  context: {
-                    ...snapshot.context,
-                    selection: {
-                      anchor: match.selection.anchor,
-                      focus: {
-                        path: match.selection.focus.path,
-                        offset: Math.min(
-                          match.selection.focus.offset,
-                          event.textBefore.length,
-                        ),
-                      },
-                    },
-                  },
-                })?.marks ?? [],
-            },
-          }),
-        ])
-
         return [
           ...actions,
           raise({