@portabletext/plugin-typography 0.0.1

package/src/input-rules.typography.ts

@@ -0,0 +1,190 @@
+import {
+  defineTextTransformRule,
+  type InputRule,
+} from '@portabletext/plugin-input-rule'
+
+/**
+ * @public
+ */
+export const emDashRule = defineTextTransformRule({
+  on: /--/,
+  transform: () => '—',
+})
+
+/**
+ * @public
+ */
+export const ellipsisRule = defineTextTransformRule({
+  on: /\.\.\./,
+  transform: () => '…',
+})
+
+/**
+ * @public
+ */
+export const openingDoubleQuoteRule = defineTextTransformRule({
+  on: /(?:^|(?<=[\s{[(<'"\u2018\u201C]))"/g,
+  transform: () => '“',
+})
+
+/**
+ * @public
+ */
+export const closingDoubleQuoteRule = defineTextTransformRule({
+  on: /"/g,
+  transform: () => '”',
+})
+
+/**
+ * @public
+ */
+export const openingSingleQuoteRule = defineTextTransformRule({
+  on: /(?:^|(?<=[\s{[(<'"\u2018\u201C]))'/g,
+  transform: () => '‘',
+})
+
+/**
+ * @public
+ */
+export const closingSingleQuoteRule = defineTextTransformRule({
+  on: /'/g,
+  transform: () => '’',
+})
+
+/**
+ * @public
+ */
+export const smartQuotesRules: Array<InputRule> = [
+  openingDoubleQuoteRule,
+  closingDoubleQuoteRule,
+  openingSingleQuoteRule,
+  closingSingleQuoteRule,
+]
+
+/**
+ * @public
+ */
+export const leftArrowRule = defineTextTransformRule({
+  on: /<-/,
+  transform: () => '←',
+})
+
+/**
+ * @public
+ */
+export const rightArrowRule = defineTextTransformRule({
+  on: /->/,
+  transform: () => '→',
+})
+
+/**
+ * @public
+ */
+export const copyrightRule = defineTextTransformRule({
+  on: /\(c\)/,
+  transform: () => '©',
+})
+
+/**
+ * @public
+ */
+export const servicemarkRule = defineTextTransformRule({
+  on: /\(sm\)/,
+  transform: () => '℠',
+})
+
+/**
+ * @public
+ */
+export const trademarkRule = defineTextTransformRule({
+  on: /\(tm\)/,
+  transform: () => '™',
+})
+
+/**
+ * @beta
+ */
+export const registeredTrademarkRule = defineTextTransformRule({
+  on: /\(r\)/,
+  transform: () => '®',
+})
+
+/**
+ * @public
+ */
+export const oneHalfRule = defineTextTransformRule({
+  on: /(?:^|\s)(1\/2)\s/,
+  transform: () => '½',
+})
+
+/**
+ * @public
+ */
+export const plusMinusRule = defineTextTransformRule({
+  on: /\+\/-/,
+  transform: () => '±',
+})
+
+/**
+ * @public
+ */
+export const notEqualRule = defineTextTransformRule({
+  on: /!=/,
+  transform: () => '≠',
+})
+
+/**
+ * @public
+ */
+export const laquoRule = defineTextTransformRule({
+  on: /<</,
+  transform: () => '«',
+})
+
+/**
+ * @public
+ */
+export const raquoRule = defineTextTransformRule({
+  on: />>/,
+  transform: () => '»',
+})
+
+/**
+ * @public
+ */
+export const multiplicationRule = defineTextTransformRule({
+  on: /\d+\s?([*x])\s?\d+/,
+  transform: () => '×',
+})
+
+/**
+ * @public
+ */
+export const superscriptTwoRule = defineTextTransformRule({
+  on: /\^2/,
+  transform: () => '²',
+})
+
+/**
+ * @public
+ */
+export const superscriptThreeRule = defineTextTransformRule({
+  on: /\^3/,
+  transform: () => '³',
+})
+
+/**
+ * @public
+ */
+export const oneQuarterRule = defineTextTransformRule({
+  on: /(?:^|\s)(1\/4)\s/,
+  transform: () => '¼',
+})
+
+/**
+ * @public
+ */
+export const threeQuartersRule = defineTextTransformRule({
+  on: /(?:^|\s)(3\/4)\s/,
+  transform: () => '¾',
+})

package/src/plugin.typography.tsx

@@ -0,0 +1,182 @@
+import {
+  InputRulePlugin,
+  type InputRule,
+  type InputRuleGuard,
+} from '@portabletext/plugin-input-rule'
+import {useMemo} from 'react'
+import {
+  closingDoubleQuoteRule,
+  closingSingleQuoteRule,
+  copyrightRule,
+  ellipsisRule,
+  emDashRule,
+  laquoRule,
+  leftArrowRule,
+  multiplicationRule,
+  notEqualRule,
+  oneHalfRule,
+  oneQuarterRule,
+  openingDoubleQuoteRule,
+  openingSingleQuoteRule,
+  plusMinusRule,
+  raquoRule,
+  registeredTrademarkRule,
+  rightArrowRule,
+  servicemarkRule,
+  superscriptThreeRule,
+  superscriptTwoRule,
+  threeQuartersRule,
+  trademarkRule,
+} from './input-rules.typography'
+
+/**
+ * @public
+ */
+export type TypographyPluginProps = {
+  guard?: InputRuleGuard
+  /**
+   * Configure which rules to enable or disable. Ordinary rules like `emDash` and `ellipsis` are enabled by default.
+   * Less common rules like `multiplication` are disabled by default.
+   */
+  rules?: {
+    /**
+     * @defaultValue 'on'
+     */
+    emDash?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    ellipsis?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    openingDoubleQuote?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    closingDoubleQuote?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    openingSingleQuote?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    closingSingleQuote?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    leftArrow?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    rightArrow?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    copyright?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    trademark?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    servicemark?: 'on' | 'off'
+    /**
+     * @defaultValue 'on'
+     */
+    registeredTrademark?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    oneHalf?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    plusMinus?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    notEqual?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    laquo?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    raquo?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    multiplication?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    superscriptTwo?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    superscriptThree?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    oneQuarter?: 'on' | 'off'
+    /**
+     * @defaultValue 'off'
+     */
+    threeQuarters?: 'on' | 'off'
+  }
+}
+
+type RuleName = keyof NonNullable<TypographyPluginProps['rules']>
+
+const defaultRuleConfig: Array<{
+  name: RuleName
+  rule: InputRule
+  state: 'on' | 'off'
+}> = [
+  {name: 'emDash', rule: emDashRule, state: 'on'},
+  {name: 'ellipsis', rule: ellipsisRule, state: 'on'},
+  {name: 'openingDoubleQuote', rule: openingDoubleQuoteRule, state: 'on'},
+  {name: 'closingDoubleQuote', rule: closingDoubleQuoteRule, state: 'on'},
+  {name: 'openingSingleQuote', rule: openingSingleQuoteRule, state: 'on'},
+  {name: 'closingSingleQuote', rule: closingSingleQuoteRule, state: 'on'},
+  {name: 'leftArrow', rule: leftArrowRule, state: 'on'},
+  {name: 'rightArrow', rule: rightArrowRule, state: 'on'},
+  {name: 'copyright', rule: copyrightRule, state: 'on'},
+  {name: 'trademark', rule: trademarkRule, state: 'on'},
+  {name: 'servicemark', rule: servicemarkRule, state: 'on'},
+  {name: 'registeredTrademark', rule: registeredTrademarkRule, state: 'on'},
+  {name: 'oneHalf', rule: oneHalfRule, state: 'off'},
+  {name: 'plusMinus', rule: plusMinusRule, state: 'off'},
+  {name: 'laquo', rule: laquoRule, state: 'off'},
+  {name: 'notEqual', rule: notEqualRule, state: 'off'},
+  {name: 'raquo', rule: raquoRule, state: 'off'},
+  {name: 'multiplication', rule: multiplicationRule, state: 'off'},
+  {name: 'superscriptTwo', rule: superscriptTwoRule, state: 'off'},
+  {name: 'superscriptThree', rule: superscriptThreeRule, state: 'off'},
+  {name: 'oneQuarter', rule: oneQuarterRule, state: 'off'},
+  {name: 'threeQuarters', rule: threeQuartersRule, state: 'off'},
+]
+
+/**
+ * @public
+ */
+export function TypographyPlugin(props: TypographyPluginProps) {
+  const configuredInputRules = useMemo(
+    () =>
+      defaultRuleConfig.flatMap((rule) =>
+        props.rules && props.rules[rule.name] === 'on'
+          ? {...rule.rule, guard: props.guard ?? (() => true)}
+          : (props.rules && props.rules[rule.name] === 'off') ||
+              rule.state === 'off'
+            ? []
+            : {...rule.rule, guard: props.guard ?? (() => true)},
+      ),
+    [props.guard, props.rules],
+  )
+
+  return <InputRulePlugin {...props} rules={configuredInputRules} />
+}