RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.npmjs.com/package/vue-codemirror6 below:

vue-codemirror6 - npm

A component for using CodeMirror6 with Vue. This component works in both Vue2 and Vue3.

CHANGELOG

yarn add vue-codemirror6 codemirror

For Vue 2.7 or below, @vue/composition-api is required separately.

yarn add vue-codemirror6 @vue/composition-api

This component can handle bidirectional binding by v-model like a general Vue component.

Props Type Information model-value string | Text Text value. (Not value) basic boolean Use basicSetup. minimal boolean Use miniSetup. If a basic prop is also specified, that setting will take precedence. dark boolean Toggle Darkmode. placeholder string Add placeholder text (or HTML DOM) when blank wrap boolean Line text wrapping. see lineWrapping. tab boolean Enables tab indentation. allow-multiple-selections boolean Allow Multiple Selection. See allowMultipleSelections tab-size number Configures the tab size to use in this state. line-separator string Set line break (separetor) char. (Default is \n.) theme { [selector: string]: StyleSpec } Specify the theme. For example, if you use @codemirror/theme-one-dark, import oneDark and put it in this prop. readonly boolean Makes the cursor visible or you can drag the text but not edit the value. disabled boolean This is the reversed value of the CodeMirror editable. Similar to readonly, but setting this value to true disables dragging. lang LanguageSupport The language you want to have syntax highlighting. see https://codemirror.net/6/#languages phrases Record<string, string> Specify here if you want to make the displayed character string multilingual. see https://codemirror.net/6/examples/translate/ extensions Extension[] Includes enhancements to extend CodeMirror. linter LintSource Set Linter. Enter a linter (eg esLint([arbitrary rule]) function for @codemirror/lang-javascript, jsonParseLinter()function for@codemirror/json). See the sources for various language libraries for more information. linterConfig Object see https://codemirror.net/docs/ref/#lint.linter^config forceLinting boolean see https://codemirror.net/docs/ref/#lint.forceLinting gutter boolean Display ð´ on the line where there was an error when linter was specified. It will not work if linter is not specified. gutterConfig Object see https://codemirror.net/docs/ref/#lint.lintGutter^config tag string HTML tags used in the component. (Default is div tag.) scrollIntoView boolean Allows an external update to scroll the form. (Default is true) keymap KeyBinding[] Key bindings associate key names with command-style functions. See https://codemirror.net/docs/ref/#view.KeyBinding

â Notice: lang and linter can also be set together in extensions. These are separated for compatibility with previous versions of CodeMirror settings and for typing props.

Mark up as follows to make it work at a minimum.

<template>
  <code-mirror v-model="value" />
</template>

<script>
import { ref, defineComponent } from 'vue';

import CodeMirror from 'vue-codemirror6';

export default defineComponent({
  components: {
    CodeMirror,
  },
  setup() {
    const value = ref('Cozy lummox gives smart squid who asks for job pen.');

    return { value };
  },
});
</script>

The contents of the slot will overwrite the existing v-model. For this reason, it is recommended to use it when simply displaying with a readonly prop without using v-model.

Also, insert a <pre> tag to prevent the text in the slot from being automatically formatted.

<template>
  <code-mirror :lang="lang" :linter="linter">
    <pre>
{
  "key": "value"
}</pre
    >
  </code-mirror>
</template>

<script>
import { ref, defineComponent } from 'vue';

import { json, jsonParseLinter } from '@codemirror/lang-json';

import CodeMirror from 'vue-codemirror6';

export default defineComponent({
  components: {
    CodeMirror,
  },
  setup() {
    const lang = json();
    const linter = jsonParseLinter();
    return { lang, linter };
  },
});
</script>

When using as a Markdown editor on vite-vue3-ts-starter.

<script lang="ts" setup>
import { ref, defineComponent, type Ref } from 'vue';

// Load component
import CodeMirror from 'vue-codemirror6';

// CodeMirror extensions
import { markdown as md } from '@codemirror/lang-markdown';
import type { LanguageSupport } from '@codemirror/language';
import type { Extension } from '@codemirror/state';
import type { ViewUpdate } from '@codemirror/view';

/** text */
const value: Ref<string> = ref('');

/** Dark mode **/
const dark: Ref<boolean> = ref(
  window.matchMedia('(prefers-color-scheme: dark)').matches
);

/**
 * CodeMirror Language
 *
 * @see {@link https://codemirror.net/6/docs/ref/#language | @codemirror/language}
 */
const lang: LanguageSupport = md();

/**
 * Internationalization Config.
 * In this example, the display language to Japanese.
 * Must be reactive when used in combination with vue-i18n.
 *
 * @see {@link https://codemirror.net/6/examples/translate/ | Example: Internationalization}
 */
const phrases: Record<string, string> = {
  // @codemirror/view
  'Control character': 'å¶å¾¡æå',
  // @codemirror/commands
  'Selection deleted': 'é¸æãåé¤',
  // @codemirror/language
  'Folded lines': 'æãç³ã¾ããè¡',
  'Unfolded lines': 'æãç³ããè¡',
  to: 'è¡ãå',
  'folded code': 'æãç³ã¾ããã³ã¼ã',
  unfold: 'æãç³ã¿ãè§£é¤',
  'Fold line': 'è¡ãæãç³ã',
  'Unfold line': 'è¡ã®æãç³ãè§£é¤',
  // @codemirror/search
  'Go to line': 'è¡ãåã®è¡',
  go: 'OK',
  Find: 'æ¤ç´¢',
  Replace: 'ç½®ãæã',
  next: 'â¼',
  previous: 'â²',
  all: 'ãã¹ã¦',
  'match case': 'ä¸è´æ¡ä»¶',
  'by word': 'å¨ææ¤ç´¢',
  regexp: 'æ£è¦è¡¨ç¾',
  replace: 'ç½®ãæã',
  'replace all': 'ãã¹ã¦ãç½®ãæã',
  close: 'éãã',
  'current match': 'ç¾å¨ã®ä¸è´',
  'replaced $ matches': '$ ä»¶ã®ä¸è´ãç½®ãæã',
  'replaced match on line $': '$ è¡ã®ä¸è´ãç½®ãæã',
  'on line': 'ããè¡',
  // @codemirror/autocomplete
  Completions: 'èªåè£å®',
  // @codemirror/lint
  Diagnostics: 'ã¨ã©ã¼',
  'No diagnostics': 'ã¨ã©ã¼ãªã',
};
</script>

<template>
  <code-mirror
    v-model="value"
    basic
    :dark="dark"
    :lang="lang"
    :phrases="phrases"
  />
</template>

Event Description ready When CodeMirror loaded. focus When focus changed. update When CodeMirror state changed. Returns ViewUpdate object. change Value changed. Returns EditorState

<script setup lang="ts">
import { ref, onMounted, type Ref, type PropType } from 'vue';
import CodeMirror from 'vue-codemirror6';

const cm: Ref<InstanceType<typeof CodeMirror> | undefined> = ref();

onMounted(() => {
  console.log(cm.value?.json);
});
</script>
<template>
  <code-mirror ref="cm" />
</template>

Function / Parameter Description view Get and set EditorView. selection Get and set the EditorSelection instance. cursor Get and set the cursor location. json Get and set state to a JSON-serializable object. focus Get and set focus. lint() Force run linter (Only if linter prop is specified) forceReconfigure() Re register all extensions. CodeMirror5 backward compatible functions

The instructions below are compatible methods for those familiar with codemirror5. Since the above method is usually sufficient, its active use is not recommended.

Function Description getRange(from?: number, to?: number) Get the text between the given points in the editor. getLine(number: number) Get the content of line. lineCount() Get the number of lines in the editor. getCursor() Retrieve one end of the primary selection. listSelections() Retrieves a list of all current selections. getSelection() Get the currently selected code. getSelections() The length of the given array should be the same as the number of active selections. somethingSelected() Return true if any text is selected. replaceRange(replacement: string | Text, from: number, to: number) Replace the part of the document between from and to with the given string. replaceSelection(replacement: string | Text) Replace the selection(s) with the given string. setCursor(position: number) Set the cursor position. setSelection(anchor: number, head?: number) Set a single selection range. setSelections(ranges: readonly SelectionRange[], primary?: number) Sets a new set of selections. extendSelectionsBy(f: Function) Applies the given function to all existing selections, and calls extendSelections on the result.

Since CodeMirror has a relatively large capacity, when using vite, it is recommended to set it to output as a separate file using the manualChunks option at build time as shown below.

const config: UserConfig = {
  // ...
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // ...
          codemirror: ['vue-codemirror6'],
          'codemirror-lang': [
            // Add the following as needed.
            '@codemirror/lang-html',
            '@codemirror/lang-javascript',
            '@codemirror/lang-markdown',
          ],
          // ...
        },
      },
    },
  },
  // ...
};

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4