@portabletext/plugin-typography 0.0.1

package/src/disallow-in-code.feature

@@ -0,0 +1,54 @@
+Feature: Disallow in code
+
+  Background:
+    Given the editor is focused
+    And a global keymap
+
+  Scenario Outline: Decorated text
+    Given the text <text>
+    And "code" around <decorated>
+    When the caret is put <position>
+    And "->" is typed
+    Then the text is <new text>
+
+    Examples:
+      | text          | decorated | position        | new text          |
+      | "foo"         | "foo"     | after "foo"     | "foo->"           |
+      | "foo bar baz" | "bar"     | after "bar"     | "foo ,bar->, baz" |
+      | "foo bar baz" | "bar"     | before "bar"    | "foo →,bar, baz"  |
+      | "foo bar baz" | "bar"     | before "ar baz" | "foo ,b->ar, baz" |
+
+  Scenario Outline: Partially decorated text
+    Given the text "foo bar2x baz"
+    And "code" around "bar2x"
+    When the caret is put after "bar2x"
+    And "2" is typed
+    Then the text is "foo ,bar2x2, baz"
+
+  Scenario Outline: Partially decorated text with decorator toggled off
+    Given the text <text>
+    And "code" around <decorated>
+    When the caret is put <position>
+    And "code" is toggled
+    And <inserted text> is typed
+    Then the text is <new text>
+
+    Examples:
+      | text            | decorated | position      | inserted text | new text           |
+      | "foo bar baz"   | "bar"     | after "bar"   | "2x2"         | "foo ,bar,2×2 baz" |
+      | "foo bar2 baz"  | "bar2"    | after "bar2"  | "x2"          | "foo ,bar2,x2 baz" |
+      | "foo bar2x baz" | "bar2x"   | after "bar2x" | "2"           | "foo ,bar2x,2 baz" |
+
+  Scenario Outline: Decorated and annotated text
+    Given the text "foo bar baz"
+    And "code" around "bar"
+    And a "link" "l1" around "bar"
+    When the caret is put <position>
+    And "->" is typed
+    Then the text is <new text>
+
+    Examples:
+      | position        | new text          |
+      | after "bar"     | "foo ,bar,→ baz"  |
+      | before "bar"    | "foo →,bar, baz"  |
+      | before "ar baz" | "foo ,b->ar, baz" |

package/src/disallow-in-code.test.tsx

@@ -0,0 +1,41 @@
+import {parameterTypes} from '@portabletext/editor/test'
+import {
+  createTestEditor,
+  stepDefinitions,
+  type Context,
+} from '@portabletext/editor/test/vitest'
+import {defineSchema} from '@portabletext/schema'
+import {Before} from 'racejar'
+import {Feature} from 'racejar/vitest'
+import {createDecoratorGuard} from './create-decorator-guard'
+import disallowInCodeFeature from './disallow-in-code.feature?raw'
+import {TypographyPlugin} from './plugin.typography'
+
+const codeGuard = createDecoratorGuard({
+  decorators: ({schema}) =>
+    schema.decorators.flatMap((decorator) =>
+      decorator.name === 'code' ? [decorator.name] : [],
+    ),
+})
+
+Feature({
+  hooks: [
+    Before(async (context: Context) => {
+      const {editor, locator} = await createTestEditor({
+        children: (
+          <TypographyPlugin guard={codeGuard} rules={{multiplication: 'on'}} />
+        ),
+        schemaDefinition: defineSchema({
+          decorators: [{name: 'strong'}, {name: 'code'}],
+          annotations: [{name: 'link'}],
+        }),
+      })
+
+      context.locator = locator
+      context.editor = editor
+    }),
+  ],
+  featureText: disallowInCodeFeature,
+  stepDefinitions,
+  parameterTypes,
+})

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.feature?raw' {
+  const content: string
+  export default content
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './create-decorator-guard'
+export * from './input-rules.typography'
+export * from './plugin.typography'

package/src/input-rule.ellipsis.feature

@@ -0,0 +1,96 @@
+Feature: Ellipsis Input Rule
+
+  Background:
+    Given the editor is focused
+    And a global keymap
+
+  Scenario Outline: Inserting ellipsis in unformatted text
+    Given the text <text>
+    # The "When {string} is inserted" step inserts all characters at once to
+    # mimic how insert.text behaves on Android
+    When <inserted text> is inserted
+    Then the text is <before undo>
+    When undo is performed
+    Then the text is <after undo>
+
+    Examples:
+      | text           | inserted text  | before undo        | after undo           |
+      | ".."           | "."            | "…"                | "..."                |
+      | ""             | "..."          | "…"                | "..."                |
+      | "foo"          | "..."          | "foo…"             | "foo..."             |
+      | ""             | "foo..."       | "foo…"             | "foo..."             |
+      | "foo.."        | ".bar"         | "foo…bar"          | "foo...bar"          |
+      | ""             | "foo...bar..." | "foo…bar…"         | "foo...bar..."       |
+      | "foo...bar..." | "baz..."       | "foo...bar...baz…" | "foo...bar...baz..." |
+
+  Scenario: Inserting ellipsis inside a decorator
+    Given the text "foo.."
+    And "strong" around "foo.."
+    When the caret is put after "foo.."
+    And "." is typed
+    Then the text is "foo…"
+    And "foo…" has marks "strong"
+
+  Scenario: Inserting ellipsis at the edge of a decorator
+    Given the text "foo.."
+    And "strong" around "foo"
+    When the caret is put after "foo.."
+    And "." is typed
+    Then the text is "foo,…"
+    And "foo" has marks "strong"
+    And "…" has no marks
+
+  Scenario: Inserting ellipsis inside an annotation
+    Given the text "foo.."
+    And a "link" "l1" around "foo.."
+    When the caret is put after "foo.."
+    And "." is typed
+    Then the text is "foo…"
+    And "foo…" has marks "l1"
+
+  Scenario: Inserting ellipsis at the edge of an annotation
+    Given the text "foo.."
+    And a "link" "l1" around "foo"
+    When the caret is put after "foo.."
+    And "." is typed
+    Then the text is "foo,…"
+    And "foo" has marks "l1"
+    And "…" has no marks
+
+  Scenario Outline: Smart undo with Backspace
+    Given the text <text>
+    When <inserted text> is inserted
+    And "{Backspace}" is pressed
+    Then the text is <new text>
+
+    Examples:
+      | text           | inserted text  | new text             |
+      | ".."           | "."            | "..."                |
+      | ""             | "..."          | "..."                |
+      | "foo"          | "..."          | "foo..."             |
+      | ""             | "foo..."       | "foo..."             |
+      | "foo.."        | ".bar"         | "foo...bar"          |
+      | ""             | "foo...bar..." | "foo...bar..."       |
+      | "foo...bar..." | "baz..."       | "foo...bar...baz..." |
+
+  Scenario Outline: Smart undo aborted after text changes
+    Given the text <text>
+    When <inserted text> is inserted
+    And <new text> is inserted
+    And "{Backspace}" is pressed
+    Then the text is <final text>
+
+    Examples:
+      | text | inserted text | new text | final text |
+      | ""   | "..."         | "new"    | "…ne"      |
+
+  Scenario Outline: Smart undo aborted after selection changes
+    Given the text <text>
+    When <inserted text> is inserted
+    And "{ArrowLeft}" is pressed
+    And "{Backspace}" is pressed
+    Then the text is <final text>
+
+    Examples:
+      | text  | inserted text | final text |
+      | "foo" | "..."         | "fo…"      |

package/src/input-rule.ellipsis.test.tsx

@@ -0,0 +1,31 @@
+import {parameterTypes} from '@portabletext/editor/test'
+import {
+  createTestEditor,
+  stepDefinitions,
+  type Context,
+} from '@portabletext/editor/test/vitest'
+import {defineSchema} from '@portabletext/schema'
+import {Before} from 'racejar'
+import {Feature} from 'racejar/vitest'
+import ellipsisFeature from './input-rule.ellipsis.feature?raw'
+import {TypographyPlugin} from './plugin.typography'
+
+Feature({
+  hooks: [
+    Before(async (context: Context) => {
+      const {editor, locator} = await createTestEditor({
+        children: <TypographyPlugin />,
+        schemaDefinition: defineSchema({
+          decorators: [{name: 'strong'}],
+          annotations: [{name: 'link'}],
+        }),
+      })
+
+      context.locator = locator
+      context.editor = editor
+    }),
+  ],
+  featureText: ellipsisFeature,
+  stepDefinitions,
+  parameterTypes,
+})

package/src/input-rule.em-dash.feature

@@ -0,0 +1,104 @@
+Feature: Em Dash Input Rule
+
+  Background:
+    Given the editor is focused
+    And a global keymap
+
+  Scenario Outline: Inserting em dash in unformatted text
+    Given the text <text>
+    # The "When {string} is inserted" step inserts all characters at once to
+    # mimic how insert.text behaves on Android
+    When <inserted text> is inserted
+    Then the text is <before undo>
+    When undo is performed
+    Then the text is <after undo>
+
+    Examples:
+      | text         | inserted text | before undo      | after undo        |
+      | "-"          | "-"           | "—"              | "--"              |
+      | ""           | "--"          | "—"              | "--"              |
+      | "foo"        | "--"          | "foo—"           | "foo--"           |
+      | ""           | "foo--"       | "foo—"           | "foo--"           |
+      | "foo-"       | "-bar"        | "foo—bar"        | "foo--bar"        |
+      | ""           | "foo--bar--"  | "foo—bar—"       | "foo--bar--"      |
+      | "foo--bar--" | "baz--"       | "foo--bar--baz—" | "foo--bar--baz--" |
+
+  Scenario: Inserting em dash inside a decorator
+    Given the text "foo-"
+    And "strong" around "foo-"
+    When the caret is put after "foo-"
+    And "-" is typed
+    Then the text is "foo—"
+    And "foo—" has marks "strong"
+
+  Scenario: Inserting em dash at the edge of a decorator
+    Given the text "foo-"
+    And "strong" around "foo"
+    When the caret is put after "foo-"
+    And "-" is typed
+    Then the text is "foo,—"
+    And "foo" has marks "strong"
+    And "—" has no marks
+
+  Scenario: Inserting em dash inside an annotation
+    Given the text "foo-"
+    And a "link" "l1" around "foo-"
+    When the caret is put after "foo-"
+    And "-" is typed
+    Then the text is "foo—"
+    And "foo—" has marks "l1"
+
+  Scenario: Inserting em dash halfway inside an annotation
+    Given the text "foo-"
+    And a "link" "l1" around "foo-"
+    When the caret is put after "foo-"
+    And "-" is typed
+    Then the text is "foo—"
+    And "foo—" has marks "l1"
+
+  Scenario: Inserting em dash at the edge of an annotation
+    Given the text "foo-"
+    And a "link" "l1" around "foo"
+    When the caret is put after "foo-"
+    And "-" is typed
+    Then the text is "foo,—"
+    And "foo" has marks "l1"
+    And "—" has no marks
+
+  Scenario Outline: Smart undo with Backspace
+    Given the text <text>
+    When <inserted text> is inserted
+    And "{Backspace}" is pressed
+    Then the text is <new text>
+
+    Examples:
+      | text         | inserted text | new text          |
+      | "-"          | "-"           | "--"              |
+      | ""           | "--"          | "--"              |
+      | "foo"        | "--"          | "foo--"           |
+      | ""           | "foo--"       | "foo--"           |
+      | "foo-"       | "-bar"        | "foo--bar"        |
+      | ""           | "foo--bar--"  | "foo--bar--"      |
+      | "foo--bar--" | "baz--"       | "foo--bar--baz--" |
+
+  Scenario Outline: Smart undo aborted after text changes
+    Given the text <text>
+    When <inserted text> is inserted
+    And <new text> is inserted
+    And "{Backspace}" is pressed
+    Then the text is <final text>
+
+    Examples:
+      | text | inserted text | new text | final text |
+      | ""   | "--"          | "new"    | "—ne"      |
+
+  Scenario Outline: Smart undo aborted after selection changes
+    Given the text <text>
+    When <inserted text> is inserted
+    And "{ArrowLeft}" is pressed
+    And "{Backspace}" is pressed
+    Then the text is <final text>
+
+    Examples:
+      | text  | inserted text | final text |
+      | "foo" | "--"          | "fo—"      |

package/src/input-rule.em-dash.test.tsx

@@ -0,0 +1,31 @@
+import {parameterTypes} from '@portabletext/editor/test'
+import {
+  createTestEditor,
+  stepDefinitions,
+  type Context,
+} from '@portabletext/editor/test/vitest'
+import {defineSchema} from '@portabletext/schema'
+import {Before} from 'racejar'
+import {Feature} from 'racejar/vitest'
+import emDashFeature from './input-rule.em-dash.feature?raw'
+import {TypographyPlugin} from './plugin.typography'
+
+Feature({
+  hooks: [
+    Before(async (context: Context) => {
+      const {editor, locator} = await createTestEditor({
+        children: <TypographyPlugin />,
+        schemaDefinition: defineSchema({
+          decorators: [{name: 'strong'}],
+          annotations: [{name: 'link'}],
+        }),
+      })
+
+      context.locator = locator
+      context.editor = editor
+    }),
+  ],
+  featureText: emDashFeature,
+  stepDefinitions,
+  parameterTypes,
+})

package/src/input-rule.multiplication.feature

@@ -0,0 +1,26 @@
+Feature: Multiplication Input Rule
+
+  Background:
+    Given the editor is focused
+    And a global keymap
+
+  Scenario Outline: Inserting multiplication sign
+    Given the text <text>
+    When <inserted text> is inserted
+    Then the text is <new text>
+
+    Examples:
+      | text | inserted text | new text |
+      | ""   | "1*2"         | "1×2"    |
+      | ""   | "1*2*3"       | "1×2×3"  |
+
+  Scenario Outline: Inserting multiplication sign and writing afterwards
+    Given the text <text>
+    When <inserted text> is inserted
+    And "new" is typed
+    Then the text is <new text>
+
+    Examples:
+      | text | inserted text | new text   |
+      | ""   | "1*2"         | "1×2new"   |
+      | ""   | "1*2*3"       | "1×2×3new" |

package/src/input-rule.multiplication.test.tsx

@@ -0,0 +1,31 @@
+import {parameterTypes} from '@portabletext/editor/test'
+import {
+  createTestEditor,
+  stepDefinitions,
+  type Context,
+} from '@portabletext/editor/test/vitest'
+import {defineSchema} from '@portabletext/schema'
+import {Before} from 'racejar'
+import {Feature} from 'racejar/vitest'
+import multiplicationFeature from './input-rule.multiplication.feature?raw'
+import {TypographyPlugin} from './plugin.typography'
+
+Feature({
+  hooks: [
+    Before(async (context: Context) => {
+      const {editor, locator} = await createTestEditor({
+        children: <TypographyPlugin rules={{multiplication: 'on'}} />,
+        schemaDefinition: defineSchema({
+          decorators: [{name: 'strong'}],
+          annotations: [{name: 'link'}],
+        }),
+      })
+
+      context.locator = locator
+      context.editor = editor
+    }),
+  ],
+  featureText: multiplicationFeature,
+  stepDefinitions,
+  parameterTypes,
+})

package/src/input-rule.smart-quotes.feature

@@ -0,0 +1,73 @@
+Feature: Smart Quotes Input Rule
+
+  Background:
+    Given the editor is focused
+    And a global keymap
+
+  Scenario Outline: Typing turns double quotes into smart quotes
+    Given the text <text>
+    When <inserted text> is typed
+    Then the text is <new text>
+
+    Examples:
+      | text    | inserted text     | new text      |
+      | ""      | "\"foo\""         | "“foo”"       |
+      | "“foo”" | " \"bar\""        | "“foo” “bar”" |
+      | ""      | "\"foo\" \"bar\"" | "“foo” “bar”" |
+
+  Scenario Outline: Inserting double smart quotes in unformatted text
+    Given the text <text>
+    # The "When {string} is inserted" step inserts all characters at once to
+    # mimic how insert.text behaves on Android
+    When <inserted text> is inserted
+    Then the text is <before undo>
+    When undo is performed
+    Then the text is <after undo>
+
+    Examples:
+      | text    | inserted text | before undo  | after undo   |
+      | ""      | "\""          | "“"          | """          |
+      | ""      | "\"\""        | "““"         | """"         |
+      | ""      | "\"\"\""      | "“““"        | """""        |
+      | "”"     | "\""          | "””"         | "”""         |
+      # | "”"  | "\"\""        | "”””"       | "””""      |
+      | ""      | "\"foo\""     | "“foo”"      | ""foo""      |
+      | "“foo"  | "\""          | "“foo”"      | "“foo""      |
+      | ""foo"  | "\""          | ""foo”"      | ""foo""      |
+      | ""foo"" | "\"bar\""     | ""foo"“bar”" | ""foo""bar"" |
+      | "“foo”" | "\""          | "“foo””"     | "“foo”""     |
+
+  # | "“foo”" | "\"\""        | "“foo”””"    | "“foo”"""    |
+  Scenario Outline: Inserting single smart quotes in unformatted text
+    Given the text <text>
+    # The "When {string} is inserted" step inserts all characters at once to
+    # mimic how insert.text behaves on Android
+    When <inserted text> is inserted
+    Then the text is <before undo>
+    When undo is performed
+    Then the text is <after undo>
+
+    Examples:
+      | text    | inserted text | before undo  | after undo   |
+      | ""      | "'"           | "‘"          | "'"          |
+      | ""      | "'foo'"       | "‘foo’"      | "'foo'"      |
+      | "‘foo"  | "'"           | "‘foo’"      | "‘foo'"      |
+      | "'foo"  | "'"           | "'foo’"      | "'foo'"      |
+      | "'foo'" | "'bar'"       | "'foo'‘bar’" | "'foo''bar'" |
+
+  Scenario: Mixed quotes
+    Given the text ""
+    When "\"'sorry' you say?\" she asked" is typed
+    Then the text is "“‘sorry’ you say?” she asked"
+
+  Scenario Outline: Contractions
+    When <text> is typed
+    Then the text is <new text>
+
+    Examples:
+      | text     | new text |
+      | "it's"   | "it’s"   |
+      | "don't"  | "don’t"  |
+      | "won't"  | "won’t"  |
+      | "I'm"    | "I’m"    |
+      | "you're" | "you’re" |

package/src/input-rule.smart-quotes.test.tsx

@@ -0,0 +1,31 @@
+import {parameterTypes} from '@portabletext/editor/test'
+import {
+  createTestEditor,
+  stepDefinitions,
+  type Context,
+} from '@portabletext/editor/test/vitest'
+import {defineSchema} from '@portabletext/schema'
+import {Before} from 'racejar'
+import {Feature} from 'racejar/vitest'
+import smartQuotesFeature from './input-rule.smart-quotes.feature?raw'
+import {TypographyPlugin} from './plugin.typography'
+
+Feature({
+  hooks: [
+    Before(async (context: Context) => {
+      const {editor, locator} = await createTestEditor({
+        children: <TypographyPlugin />,
+        schemaDefinition: defineSchema({
+          decorators: [{name: 'strong'}],
+          annotations: [{name: 'link'}],
+        }),
+      })
+
+      context.locator = locator
+      context.editor = editor
+    }),
+  ],
+  featureText: smartQuotesFeature,
+  stepDefinitions,
+  parameterTypes,
+})