feat: add phrases prop

Author: surmon-china

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## CHANGELOG
 
+### v6.1.0 (2022-08-27)
+
+- feat: add `phrases` prop [#166](https://github.com/surmon-china/vue-codemirror/pull/166)
+
 ### v6.0.2 (2022-07-27)
 
 - fix: Use the correct global component name [#161](https://github.com/surmon-china/vue-codemirror/discussions/161)

README.md

@@ -111,13 +111,13 @@ import { EditorState } from '@codemirror/state'
     setup() {
       const code = ref(`console.log('Hello, world!')`)
       const extensions = [javascript(), oneDark]
-      
+
       // Codemirror EditorView instance ref
       const view = shallowRef()
       const handleReady = (payload) => {
         view.value = payload.view
       }
-      
+
       // Status is available at all times via Codemirror EditorView
       const getCodemirrorStates = () => {
         const state = view.value.state
@@ -164,19 +164,20 @@ app.use(VueCodemirror, {
 
 ### Component Props
 
-| prop          | description                                                              | type                     | default |
-| :------------ | :----------------------------------------------------------------------- | :----------------------- | :------ |
-| modelValue    | The input values accepted by the component also support two-way binding. | `String`                 | `''`    |
-| autofocus     | Focus editor immediately after mounted.                                  | `Boolean`                | `false` |
-| disabled      | Disable input behavior and disable change state.                         | `Boolean`                | `false` |
-| indentWithTab | Bind keyboard Tab key event.                                             | `Boolean`                | `true`  |
-| tabSize       | Specify the indent when the Tab key is pressed.                          | `Number`                 | `2`     |
-| placeholder   | Display when empty.                                                      | `String`                 | `''`    |
-| style         | The CSS style object that acts on the CodeMirror itself.                 | `Object`                 | `{}`    |
-| autoDestroy   | Auto destroy the CodeMirror instance before the component unmount.       | `Boolean`                | `true`  |
-| extensions    | Passed to CodeMirror `EditorState.create({ extensions })`                | `Extension`              | `[]`    |
-| selection     | Passed to CodeMirror `EditorState.create({ selection })`                 | `EditorSelection`        | -       |
-| root          | Passed to CodeMirror `new EditorView({ root })`                          | `ShadowRoot \| Document` | -       |
+| prop          | description                                                                            | type                     | default |
+| :------------ | :------------------------------------------------------------------------------------- | :----------------------- | :------ |
+| modelValue    | The input values accepted by the component also support two-way binding.               | `String`                 | `''`    |
+| autofocus     | Focus editor immediately after mounted.                                                | `Boolean`                | `false` |
+| disabled      | Disable input behavior and disable change state.                                       | `Boolean`                | `false` |
+| indentWithTab | Bind keyboard Tab key event.                                                           | `Boolean`                | `true`  |
+| tabSize       | Specify the indent when the Tab key is pressed.                                        | `Number`                 | `2`     |
+| placeholder   | Display when empty.                                                                    | `String`                 | `''`    |
+| style         | The CSS style object that acts on the CodeMirror itself.                               | `Object`                 | `{}`    |
+| phrases       | Codemirror [internationalization phrases](https://codemirror.net/examples/translate/). | `Object`                 | `{}`    |
+| autoDestroy   | Auto destroy the CodeMirror instance before the component unmount.                     | `Boolean`                | `true`  |
+| extensions    | Passed to CodeMirror `EditorState.create({ extensions })`                              | `Extension`              | `[]`    |
+| selection     | Passed to CodeMirror `EditorState.create({ selection })`                               | `EditorSelection`        | -       |
+| root          | Passed to CodeMirror `new EditorView({ root })`                                        | `ShadowRoot \| Document` | -       |
 
 ### Component Events
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-codemirror",
   "description": "CodeMirror code editor component for Vue",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "author": "Surmon",
   "license": "MIT",
   "keywords": [

src/component.ts

@@ -100,7 +100,7 @@ export default defineComponent({
       // watch prop.phrases
       watch(
         () => config.value.phrases,
-        (phrases) => editorTools.setPhrases(phrases!),
+        (phrases) => editorTools.setPhrases(phrases || {}),
         { immediate: true }
       )
 

src/props.ts

@@ -16,11 +16,11 @@ export const configProps = {
   placeholder: String,
   style: Object as PropType<CSS.Properties>,
   autoDestroy: NonDefaultBooleanType,
+  phrases: Object as PropType<Record<string, string>>,
   // codemirror options
   root: Object as PropType<ShadowRoot | Document>,
   extensions: Array as PropType<EditorStateConfig['extensions']>,
-  selection: Object as PropType<EditorStateConfig['selection']>,
-  phrases: Object
+  selection: Object as PropType<EditorStateConfig['selection']>
 }
 
 export const modelValueProp = {