perf: add drag and drop text option in preferences. #140

backend/types/preferences.go

@@ -29,6 +29,7 @@ func NewPreferences() Preferences {
 			FontSize:    consts.DEFAULT_FONT_SIZE,
 			ShowLineNum: true,
 			ShowFolding: true,
+			DropText:    true,
 		},
 		Cli: PreferencesCli{
 			FontSize:    consts.DEFAULT_FONT_SIZE,
@@ -67,6 +68,7 @@ type PreferencesEditor struct {
 	FontSize    int      `json:"fontSize" yaml:"font_size"`
 	ShowLineNum bool     `json:"showLineNum" yaml:"show_line_num"`
 	ShowFolding bool     `json:"showFolding" yaml:"show_folding"`
+	DropText    bool     `json:"dropText" yaml:"drop_text"`
 }
 
 type PreferencesCli struct {

frontend/src/components/content_value/ContentEditor.vue

@@ -18,14 +18,6 @@ const props = defineProps({
     loading: {
         type: Boolean,
     },
-    showLineNum: {
-        type: Boolean,
-        default: true,
-    },
-    showFolding: {
-        type: Boolean,
-        default: true,
-    },
     border: {
         type: Boolean,
         default: false,
@@ -63,13 +55,14 @@ onMounted(async () => {
             // value: props.content,
             theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
             language: props.language,
-            lineNumbers: props.showLineNum ? 'on' : 'off',
+            lineNumbers: pref.showLineNum ? 'on' : 'off',
             readOnly: readonlyValue.value,
             colorDecorators: true,
             accessibilitySupport: 'off',
             wordWrap: 'on',
             tabSize: 2,
-            folding: props.showFolding !== false,
+            folding: pref.showFolding,
+            dragAndDrop: pref.dropText,
             fontFamily,
             fontSize,
             scrollBeyondLastLine: false,
@@ -151,37 +144,20 @@ watch(
 )
 
 watch(
-    () => pref.editorFont,
+    () => pref.editor,
-    ({ fontSize, fontFamily }) => {
+    ({ showLineNum = true, showFolding = true, dropText = true }) => {
         if (editorNode != null) {
+            const { fontSize, fontFamily } = pref.editorFont
             editorNode.updateOptions({
                 fontSize,
                 fontFamily,
-            })
-        }
-    },
-)
-
-watch(
-    () => pref.showLineNum,
-    (showLineNum) => {
-        if (editorNode != null) {
-            editorNode.updateOptions({
                 lineNumbers: showLineNum ? 'on' : 'off',
+                folding: showFolding,
+                dragAndDrop: dropText,
             })
         }
     },
-)
+    { deep: true },
-
-watch(
-    () => pref.showFolding,
-    (showFolding) => {
-        if (editorNode != null) {
-            editorNode.updateOptions({
-                folding: showFolding !== false,
-            })
-        }
-    },
 )
 
 onUnmounted(() => {

frontend/src/components/content_value/ContentEntryEditor.vue

@@ -12,7 +12,6 @@ import WindowClose from '@/components/icons/WindowClose.vue'
 import Pin from '@/components/icons/Pin.vue'
 import OffScreen from '@/components/icons/OffScreen.vue'
 import ContentEditor from '@/components/content_value/ContentEditor.vue'
-import usePreferencesStore from 'stores/preferences.js'
 import { toString } from 'lodash'
 
 const props = defineProps({
@@ -47,7 +46,6 @@ const props = defineProps({
 
 const themeVars = useThemeVars()
 const browserStore = useBrowserStore()
-const prefStore = usePreferencesStore()
 const emit = defineEmits([
     'update:field',
     'update:value',
@@ -176,8 +174,6 @@ const onSave = () => {
                         :border="true"
                         :content="displayValue"
                         :language="viewLanguage"
-                        :show-folding="prefStore.showFolding"
-                        :show-line-num="prefStore.showLineNum"
                         class="flex-item-expand"
                         @input="onInput"
                         @reset="onInput"

frontend/src/components/content_value/ContentValueString.vue

@@ -12,7 +12,6 @@ import useBrowserStore from 'stores/browser.js'
 import { decodeRedisKey } from '@/utils/key_convert.js'
 import FormatSelector from '@/components/content_value/FormatSelector.vue'
 import ContentEditor from '@/components/content_value/ContentEditor.vue'
-import usePreferencesStore from 'stores/preferences.js'
 import { formatBytes } from '@/utils/byte_convert.js'
 
 const props = defineProps({
@@ -35,7 +34,6 @@ const props = defineProps({
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
-const prefStore = usePreferencesStore()
 
 /**
  *
@@ -205,8 +203,6 @@ defineExpose({
                 :content="displayValue"
                 :language="viewLanguage"
                 :loading="props.loading"
-                :show-folding="prefStore.showFolding"
-                :show-line-num="prefStore.showLineNum"
                 class="flex-item-expand"
                 style="height: 100%"
                 @input="onInput"

frontend/src/components/dialogs/PreferencesDialog.vue

@@ -181,6 +181,7 @@ const onClose = () => {
             placement="left"
             tab-style="justify-content: right; font-weight: 420;"
             type="line">
+            <!-- general pane -->
             <n-tab-pane :tab="$t('preferences.general.name')" display-directive="show" name="general">
                 <n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top">
                     <n-grid :x-gap="10">
@@ -257,6 +258,7 @@ const onClose = () => {
                 </n-form>
             </n-tab-pane>
 
+            <!-- editor pane -->
             <n-tab-pane :tab="$t('preferences.editor.name')" display-directive="show" name="editor">
                 <n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
                     <n-grid :x-gap="10">
@@ -294,10 +296,16 @@ const onClose = () => {
                                 {{ $t('preferences.editor.show_folding') }}
                             </n-checkbox>
                         </n-form-item-gi>
+                        <n-form-item-gi :show-feedback="false" :show-label="false" :span="24">
+                            <n-checkbox v-model:checked="prefStore.editor.dropText">
+                                {{ $t('preferences.editor.drop_text') }}
+                            </n-checkbox>
+                        </n-form-item-gi>
                     </n-grid>
                 </n-form>
             </n-tab-pane>
 
+            <!-- cli pane -->
             <n-tab-pane :tab="$t('preferences.cli.name')" display-directive="show" name="cli">
                 <n-form :disabled="loading" :model="prefStore.cli" :show-require-mark="false" label-placement="top">
                     <n-grid :x-gap="10">
@@ -339,7 +347,7 @@ const onClose = () => {
                 </n-form>
             </n-tab-pane>
 
-            <!-- Custom decoder pane -->
+            <!-- custom decoder pane -->
             <n-tab-pane :tab="$t('preferences.decoder.name')" display-directive="show:lazy" name="decoder">
                 <n-space>
                     <n-button @click="dialogStore.openDecoderDialog()">

frontend/src/langs/en-us.json

@@ -54,7 +54,8 @@
     "editor": {
       "name": "Editor",
       "show_linenum": "Show Line Numbers",
-      "show_folding": "Enable Code Folding"
+      "show_folding": "Enable Code Folding",
+      "drop_text": "Allow Drag and Drop Text"
     },
     "cli": {
       "name": "Command Line",

frontend/src/langs/zh-cn.json

@@ -54,7 +54,8 @@
     "editor": {
       "name": "编辑器",
       "show_linenum": "显示行号",
-      "show_folding": "启用代码折叠"
+      "show_folding": "启用代码折叠",
+      "drop_text": "允许拖放文本"
     },
     "cli": {
       "name": "命令行",

frontend/src/stores/preferences.js

@@ -58,6 +58,7 @@ const usePreferencesStore = defineStore('preferences', {
             fontSize: 14,
             showLineNum: true,
             showFolding: true,
+            dropText: true,
         },
         cli: {
             fontFamily: [],
@@ -254,6 +255,10 @@ const usePreferencesStore = defineStore('preferences', {
             return get(this.editor, 'showFolding', true)
         },
 
+        dropText() {
+            return get(this.editor, 'dropText', true)
+        },
+
         keyIconType() {
             return get(this.general, 'keyIconStyle', typesIconStyle.SHORT)
         },
@@ -283,6 +288,10 @@ const usePreferencesStore = defineStore('preferences', {
                 if (showFolding === undefined) {
                     set(data, 'editor.showFolding', true)
                 }
+                const dropText = get(data, 'editor.dropText')
+                if (dropText === undefined) {
+                    set(data, 'editor.dropText', true)
+                }
                 i18nGlobal.locale.value = this.currentLanguage
             }
         },