@procore/text-editor 0.0.2 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# @procore/text-editor
+
+## 0.1.0
+
+### Minor Changes
+
+- New toolbar defaults. Remove `plugins` and `config` props to rely on the TextEditor package's default internal configuration.
+- Add Enter key `stopPropagation` to prevent form submission when pressing Enter in the editor.
+
+## 0.0.3
+
+### Patch Changes
+
+- 4656bce: Default provider TAB key as navigation to remove keyboard trap
+
+## 0.0.2
+
+### Patch Changes
+
+- 7d01b54: Fix some types and remove legacy tinymce no-ops and focus.
+
+## 0.0.1
+
+### Patch Changes
+
+- f95beb2: Initial release of a separate TextEditor package, extracted from core-react.

package/README.md

@@ -10,7 +10,7 @@ yarn add @procore/text-editor
 
 ## Usage
 
-### Basic Usage
+### TextEditor Usage
 
 ```tsx
 import { TextEditor } from '@procore/text-editor'
@@ -27,27 +27,6 @@ function MyComponent() {
 }
 ```
 
-### With Custom Configuration
-
-```tsx
-import { TextEditor } from '@procore/text-editor'
-
-function MyComponent() {
-  const [value, setValue] = React.useState('')
-
-  return (
-    <TextEditor
-      value={value}
-      onChange={(newValue) => setValue(newValue)}
-      plugins={['link', 'table']}
-      config={(defaultConfig) => ({
-        ...defaultConfig,
-        // Your custom CKEditor configuration
-      })}
-    />
-  )
-}
-```
 
 ### TextEditorProvider
 

package/codemod/__fixtures__/procore.config.ternary.js

@@ -0,0 +1,18 @@
+const { coreReactJestConfig } = require('@procore/core-react/jestConfig')
+
+module.exports = ({ env }) => ({
+  app: {
+    webpackOverride(config) {
+      return config
+    },
+    moduleFederation: {
+      shared:
+        process.env.NODE_ENV === 'production'
+          ? { react: deps.react, 'react-dom': deps['react-dom'] }
+          : {},
+    },
+  },
+  jestOverride: (defaultConfig) => {
+    return coreReactJestConfig(defaultConfig)
+  },
+})

package/codemod/__fixtures__/src/components/MultilineFormRichText.tsx

@@ -1,4 +1,4 @@
-import { Form } from '@procore/core-react'
+import { Form, TextEditor } from '@procore/core-react'
 import React from 'react'
 
 export const MultilineFormRichText = () => {
@@ -9,6 +9,7 @@ export const MultilineFormRichText = () => {
         label="Description"
         plugins={['table']}
       />
+      <TextEditor value="notes" plugins={['links']} />
     </Form>
   )
 }

package/codemod/text-editor-migrate.js

@@ -9,6 +9,7 @@
  * 2. Updates Form.RichText usage to include textEditorComponent prop
  * 3. Updates Jest configuration to use textEditorJestConfig
  * 4. Adds ckeditor5 singleton to module federation shared config
+ * 5. Remove deprecated plugins prop from TextEditor and Form.RichText components
  */
 
 const fs = require('fs')
@@ -168,6 +169,52 @@ function transformImports(fileContent) {
   return { content: newContent, modified, needsTextEditorImport }
 }
 
+/**
+ * Remove deprecated plugins prop from TextEditor and Form.RichText components
+ */
+function removeDeprecatedProps(fileContent) {
+  let modified = false
+  let newContent = fileContent
+
+  // Pattern to match TextEditor components with plugins prop
+  const textEditorRegex = /(<TextEditor)([\s\S]*?)(\/>|>)/g
+  newContent = newContent.replace(
+    textEditorRegex,
+    (match, opening, props, closing) => {
+      let updatedProps = props
+      const hasPlugins = props.includes('plugins=')
+
+      if (hasPlugins) {
+        // Remove plugins prop
+        updatedProps = updatedProps.replace(/\s*plugins\s*=\s*\{[^}]*\}/g, '')
+        modified = true
+      }
+
+      return opening + updatedProps + closing
+    }
+  )
+
+  // Pattern to match Form.RichText components with plugins prop
+  const formRichTextRegex = /(<Form\.RichText(?:Field)?)([\s\S]*?)(\/>|>)/g
+  newContent = newContent.replace(
+    formRichTextRegex,
+    (match, opening, props, closing) => {
+      let updatedProps = props
+      const hasPlugins = props.includes('plugins=')
+
+      if (hasPlugins) {
+        // Remove plugins prop
+        updatedProps = updatedProps.replace(/\s*plugins\s*=\s*\{[^}]*\}/g, '')
+        modified = true
+      }
+
+      return opening + updatedProps + closing
+    }
+  )
+
+  return { content: newContent, modified }
+}
+
 /**
  * Transform Form.RichText usage
  */
@@ -289,9 +336,255 @@ function transformFormRichText(fileContent) {
   return { content: newContent, modified }
 }
 
+/**
+ * Add ckeditor5 singleton configuration to a shared object
+ * Returns the modified content and whether it was modified
+ */
+function addSingletonToSharedObject(content, sharedMatch) {
+  const insertPosition = sharedMatch.index + sharedMatch[0].length
+
+  // Detect indentation by looking at the content after `shared: {` or similar
+  // Find the first property inside shared to determine proper indentation
+  const afterShared = content.substring(insertPosition)
+  const firstPropertyMatch = afterShared.match(/\n(\s+)\w+\s*:/)
+
+  let propertyIndent = ''
+  let indentUnit = '  ' // default to 2 spaces
+
+  if (firstPropertyMatch) {
+    // Use the same indentation as the first property inside shared
+    propertyIndent = firstPropertyMatch[1]
+    // Detect indent unit from the property indent
+    const sharedLineMatch = content
+      .substring(0, sharedMatch.index)
+      .match(/\n(\s+)(?:shared|\?)/)
+    if (sharedLineMatch) {
+      const sharedIndent = sharedLineMatch[1]
+      // indentUnit is the difference between property indent and shared indent
+      if (propertyIndent.length > sharedIndent.length) {
+        indentUnit = propertyIndent.substring(sharedIndent.length)
+      }
+    }
+  } else {
+    // Fallback: detect from the 'shared' line indentation
+    const beforeMatch = content.substring(0, sharedMatch.index)
+    const lastNewlineIndex = beforeMatch.lastIndexOf('\n')
+    const lineStart =
+      lastNewlineIndex >= 0
+        ? beforeMatch.substring(lastNewlineIndex + 1)
+        : beforeMatch
+    const baseIndentMatch = lineStart.match(/^(\s*)/)
+    const baseIndent = baseIndentMatch ? baseIndentMatch[1] : ''
+
+    // Determine if we're using tabs or spaces
+    const useTabs = baseIndent.includes('\t')
+    indentUnit = useTabs ? '\t' : '  '
+    propertyIndent = baseIndent + indentUnit
+  }
+
+  // Build the ckeditor5 configuration
+  const ckeditor5Config = `
+${propertyIndent}ckeditor5: {
+${propertyIndent}${indentUnit}requiredVersion: deps['ckeditor5'],
+${propertyIndent}${indentUnit}singleton: true,
+${propertyIndent}},`
+
+  // Insert the ckeditor5 configuration after the opening brace
+  return (
+    content.substring(0, insertPosition) +
+    ckeditor5Config +
+    content.substring(insertPosition)
+  )
+}
+
+/**
+ * Add deps import/require statement to the file if not already present
+ */
+function addDepsImport(content, filePath) {
+  // Check if deps variable is already declared
+  if (
+    content.includes("require('./package.json')") ||
+    content.includes("require('./package.json').dependencies") ||
+    content.includes("from './package.json'")
+  ) {
+    return content
+  }
+
+  // Determine if using CommonJS or ES modules
+  const isESModule =
+    content.includes('export default') ||
+    content.includes('export {') ||
+    filePath.endsWith('.mjs')
+
+  if (isESModule) {
+    // For ES modules, add import at the top
+    const importStatement =
+      "import deps from './package.json' with { type: 'json' }\n"
+
+    // Find the first import or export statement
+    const firstImportMatch = content.match(/^(import|export)/m)
+    if (firstImportMatch) {
+      const insertPos = content.indexOf(firstImportMatch[0])
+      return (
+        content.substring(0, insertPos) +
+        importStatement +
+        content.substring(insertPos)
+      )
+    } else {
+      return importStatement + content
+    }
+  } else {
+    // For CommonJS, add require at the top
+    const requireStatement =
+      "const deps = require('./package.json').dependencies\n"
+
+    // Find the first require or const statement
+    const firstRequireMatch = content.match(/^(const|let|var|require)/m)
+    if (firstRequireMatch) {
+      const insertPos = content.indexOf(firstRequireMatch[0])
+      return (
+        content.substring(0, insertPos) +
+        requireStatement +
+        content.substring(insertPos)
+      )
+    } else {
+      return requireStatement + content
+    }
+  }
+}
+
+/**
+ * Find the matching closing brace for an opening brace at the given position
+ */
+function findMatchingBrace(content, openBracePos) {
+  let depth = 1
+  let pos = openBracePos + 1
+
+  while (pos < content.length && depth > 0) {
+    const char = content[pos]
+    if (char === '{') {
+      depth++
+    } else if (char === '}') {
+      depth--
+    }
+    pos++
+  }
+
+  return depth === 0 ? pos - 1 : -1
+}
+
+/**
+ * Check if an object block contains a 'react' key
+ */
+function objectContainsReact(content, openBracePos) {
+  const closeBracePos = findMatchingBrace(content, openBracePos)
+  if (closeBracePos === -1) return false
+
+  const objectContent = content.substring(openBracePos, closeBracePos + 1)
+  // Check for react as a key (handles react:, 'react':, "react":)
+  return /(?:^|[{,\s])react\s*:|['"]react['"]\s*:/.test(objectContent)
+}
+
+/**
+ * Transform module federation with ternary conditional pattern
+ * Handles patterns like:
+ *   shared: process.env.NODE_ENV === 'production'
+ *     ? { react: deps.react, 'react-dom': deps['react-dom'] }
+ *     : {},
+ * Only adds ckeditor5 to branches that contain 'react'
+ */
+function transformModuleFederationTernary(fileContent, filePath) {
+  let newContent = fileContent
+
+  // Pattern to match ternary conditional for shared - find the opening brace of the consequent
+  // Matches: shared: <condition> ? {
+  const ternaryRegex =
+    /shared\s*:\s*[\w.]+\s*===?\s*['"][^'"]+['"]\s*\?\s*(\{)/g
+
+  let match
+  let offset = 0
+
+  // Find all ternary patterns and process the consequent (true branch)
+  while ((match = ternaryRegex.exec(fileContent)) !== null) {
+    const adjustedIndex = match.index + offset
+    const bracePos = adjustedIndex + match[0].length - 1 // Position of the opening brace
+
+    // Only add ckeditor5 if this branch contains 'react'
+    if (!objectContainsReact(newContent, bracePos)) {
+      continue
+    }
+
+    const adjustedMatch = {
+      ...match,
+      index: bracePos,
+      0: '{',
+    }
+
+    const beforeLength = newContent.length
+    newContent = addSingletonToSharedObject(newContent, adjustedMatch)
+    offset += newContent.length - beforeLength
+  }
+
+  // Now find and process the alternate (false branch) - the : { ... } part
+  // We need to find the consequent's closing brace first, then find the alternate
+  const ternaryRegex2 = /shared\s*:\s*[\w.]+\s*===?\s*['"][^'"]+['"]\s*\?\s*\{/g
+
+  let match2
+  while ((match2 = ternaryRegex2.exec(newContent)) !== null) {
+    // Find the opening brace of the consequent
+    const consequentOpenBrace = match2.index + match2[0].length - 1
+
+    // Find the matching closing brace
+    const consequentCloseBrace = findMatchingBrace(
+      newContent,
+      consequentOpenBrace
+    )
+
+    if (consequentCloseBrace === -1) continue
+
+    // Find the alternate branch - look for : { after the closing brace
+    const afterConsequent = newContent.substring(consequentCloseBrace + 1)
+    const alternateMatch = afterConsequent.match(/^\s*:\s*(\{)/)
+
+    if (alternateMatch) {
+      const alternateBracePos =
+        consequentCloseBrace +
+        1 +
+        alternateMatch.index +
+        alternateMatch[0].length -
+        1
+
+      // Only add ckeditor5 if this branch contains 'react'
+      if (!objectContainsReact(newContent, alternateBracePos)) {
+        continue
+      }
+
+      const adjustedMatch = {
+        index: alternateBracePos,
+        0: '{',
+      }
+
+      newContent = addSingletonToSharedObject(newContent, adjustedMatch)
+    }
+  }
+
+  // Add deps import if needed only if we made changes
+  if (newContent !== fileContent) {
+    newContent = addDepsImport(newContent, filePath)
+  }
+
+  const modified = newContent !== fileContent
+  if (modified) {
+    stats.moduleFederationUpdated++
+  }
+
+  return { content: newContent, modified }
+}
+
 /**
  * Transform module federation configuration to add ckeditor5 singleton
  * Handles both hammer.config.* and procore.config.* files
+ * Supports both direct object pattern and ternary conditional pattern
  */
 function transformModuleFederation(fileContent, filePath) {
   let modified = false
@@ -321,6 +614,12 @@ function transformModuleFederation(fileContent, filePath) {
     return { content: newContent, modified }
   }
 
+  // Check if this is a ternary conditional pattern
+  const ternaryPattern = /shared\s*:\s*[\w.]+\s*===?\s*['"][^'"]+['"]\s*\?/
+  if (ternaryPattern.test(newContent)) {
+    return transformModuleFederationTernary(newContent, filePath)
+  }
+
   // Pattern to match shared object in moduleFederation
   // Handles both `shared: {` and `shared:{` patterns
   const sharedObjectRegex = /(shared\s*:\s*\{)/g
@@ -332,109 +631,8 @@ function transformModuleFederation(fileContent, filePath) {
     // Find the match and its position
     const match = sharedObjectRegex.exec(newContent)
     if (match) {
-      const insertPosition = match.index + match[0].length
-
-      // Detect indentation by looking at the content after `shared: {`
-      // Find the first property inside shared to determine proper indentation
-      const afterShared = newContent.substring(insertPosition)
-      const firstPropertyMatch = afterShared.match(/\n(\s+)\w+\s*:/)
-
-      let propertyIndent = ''
-      let indentUnit = '  ' // default to 2 spaces
-
-      if (firstPropertyMatch) {
-        // Use the same indentation as the first property inside shared
-        propertyIndent = firstPropertyMatch[1]
-        // Detect indent unit from the property indent
-        const sharedLineMatch = newContent
-          .substring(0, match.index)
-          .match(/\n(\s+)shared/)
-        if (sharedLineMatch) {
-          const sharedIndent = sharedLineMatch[1]
-          // indentUnit is the difference between property indent and shared indent
-          if (propertyIndent.length > sharedIndent.length) {
-            indentUnit = propertyIndent.substring(sharedIndent.length)
-          }
-        }
-      } else {
-        // Fallback: detect from the 'shared' line indentation
-        const beforeMatch = newContent.substring(0, match.index)
-        const lastNewlineIndex = beforeMatch.lastIndexOf('\n')
-        const lineStart =
-          lastNewlineIndex >= 0
-            ? beforeMatch.substring(lastNewlineIndex + 1)
-            : beforeMatch
-        const baseIndentMatch = lineStart.match(/^(\s*)/)
-        const baseIndent = baseIndentMatch ? baseIndentMatch[1] : ''
-
-        // Determine if we're using tabs or spaces
-        const useTabs = baseIndent.includes('\t')
-        indentUnit = useTabs ? '\t' : '  '
-        propertyIndent = baseIndent + indentUnit
-      }
-
-      // Build the ckeditor5 configuration
-      const ckeditor5Config = `
-${propertyIndent}ckeditor5: {
-${propertyIndent}${indentUnit}requiredVersion: deps['ckeditor5'],
-${propertyIndent}${indentUnit}singleton: true,
-${propertyIndent}},`
-
-      // Insert the ckeditor5 configuration after `shared: {`
-      newContent =
-        newContent.substring(0, insertPosition) +
-        ckeditor5Config +
-        newContent.substring(insertPosition)
-
-      // Check if deps variable is already declared
-      if (
-        !newContent.includes("require('./package.json')") &&
-        !newContent.includes("require('./package.json').dependencies") &&
-        !newContent.includes("from './package.json'")
-      ) {
-        // Add deps declaration at the top of the file
-        // Determine if using CommonJS or ES modules
-        const isESModule =
-          newContent.includes('export default') ||
-          newContent.includes('export {') ||
-          filePath.endsWith('.mjs')
-
-        if (isESModule) {
-          // For ES modules, add import at the top
-          const importStatement =
-            "import deps from './package.json' with { type: 'json' }\n"
-
-          // Find the first import or export statement
-          const firstImportMatch = newContent.match(/^(import|export)/m)
-          if (firstImportMatch) {
-            const insertPos = newContent.indexOf(firstImportMatch[0])
-            newContent =
-              newContent.substring(0, insertPos) +
-              importStatement +
-              newContent.substring(insertPos)
-          } else {
-            newContent = importStatement + newContent
-          }
-        } else {
-          // For CommonJS, add require at the top
-          const requireStatement =
-            "const deps = require('./package.json').dependencies\n"
-
-          // Find the first require or const statement
-          const firstRequireMatch = newContent.match(
-            /^(const|let|var|require)/m
-          )
-          if (firstRequireMatch) {
-            const insertPos = newContent.indexOf(firstRequireMatch[0])
-            newContent =
-              newContent.substring(0, insertPos) +
-              requireStatement +
-              newContent.substring(insertPos)
-          } else {
-            newContent = requireStatement + newContent
-          }
-        }
-      }
+      newContent = addSingletonToSharedObject(newContent, match)
+      newContent = addDepsImport(newContent, filePath)
 
       modified = true
       stats.moduleFederationUpdated++
@@ -505,7 +703,8 @@ function processFile(filePath) {
     // Config file detection
     const isConfigFile =
       /^jest\.(config|setup)\.(js|ts|cjs|mjs)$/.test(fileName) ||
-      /\.config\.(js|ts|cjs|mjs)$/.test(fileName)
+      /\.config\.(js|ts|cjs|mjs)$/.test(fileName) ||
+      /\.config\..*\.(js|ts|cjs|mjs)$/.test(fileName) // Last one for tests like "procore.config.ternay.js"
 
     // Process Jest configuration
     if (isConfigFile && content.includes('coreReactJestConfig')) {
@@ -540,6 +739,13 @@ function processFile(filePath) {
         newContent = formResult.content
         wasModified = true
       }
+
+      // Remove deprecated plugins prop
+      const deprecatedPropsResult = removeDeprecatedProps(newContent)
+      if (deprecatedPropsResult.modified) {
+        newContent = deprecatedPropsResult.content
+        wasModified = true
+      }
     }
 
     // Write back if modified
@@ -721,7 +927,9 @@ ${colors.bold}Examples:${colors.reset}
 
   if (stats.filesProcessed > 0) {
     console.log(`${colors.bold}Next steps:${colors.reset}\n`)
-    console.log('1. Review the changes made by the codemod')
+    console.log(
+      '1. Review the changes made by the codemod. May need to be linted.\n'
+    )
     console.log(
       '2. Review previous implementation for additional props and migrate to CKEditor, https://ckeditor.com/docs/ckeditor5/latest/features/index.html\n'
     )

package/codemod/text-editor-migrate.test.js

@@ -129,6 +129,15 @@ describe('text-editor-migrate codemod', () => {
       expect(content).not.toContain('textEditorComponent={TextEditor}')
       expect(content).not.toContain('@procore/text-editor')
     })
+
+    it('should remove deprecated plugins prop from Form.RichText', () => {
+      execFileSync('node', [codemodPath, testDir], { stdio: 'ignore' })
+
+      const content = readFile('src/components/MultilineFormRichText.tsx')
+
+      expect(content).not.toContain('plugins=')
+      expect(content).toContain('textEditorComponent={TextEditor}')
+    })
   })
 
   describe('Jest configuration transformations', () => {
@@ -209,6 +218,25 @@ describe('text-editor-migrate codemod', () => {
       expect(matches).toHaveLength(1)
     })
 
+    it('should add ckeditor5 only to ternary branches that contain react', () => {
+      execFileSync('node', [codemodPath, testDir], { stdio: 'ignore' })
+
+      const content = readFile('procore.config.ternary.js')
+
+      // Should have ckeditor5 only in the branch with react (production branch)
+      const ckeditor5Matches = content.match(/ckeditor5:/g)
+      expect(ckeditor5Matches).toHaveLength(1)
+
+      // Should have deps import
+      expect(content).toContain(
+        "const deps = require('./package.json').dependencies"
+      )
+
+      // Should have singleton: true only once
+      const singletonMatches = content.match(/singleton:\s*true/g)
+      expect(singletonMatches).toHaveLength(1)
+    })
+
     it('should not modify config files without moduleFederation.shared', () => {
       // Create a config file without moduleFederation
       const noModFedConfig = `

package/dist/TextEditor/TextEditor.d.ts

@@ -41,4 +41,4 @@ import type { TextEditorProps } from './TextEditor.types';
  *       }),
  *   })
  */
-export declare function TextEditor({ disabled, error, value, initialValue, onChange, onInit, onBlur, onKeyDown, config: externalConfig, plugins: stringPlugins, locale: propLocale, onDirty, ...restProps }: TextEditorProps): React.JSX.Element | null;
+export declare function TextEditor(props: Readonly<TextEditorProps>): React.JSX.Element | null;