jsonrichformat

JSON Rich Format Text Area

We have chosen code-mirror as the text formatting editor, special takes for each framework

Angular

CodeMirror

CodeMirror is a code editor component for the web. It can be used in websites to implement a text input field with support for many editing features, and has a rich programming interface to allow further extension.

It can be easily integrated into an Angular application using ngx-codemirror. It's an angular component wrapper for CodeMirror. In these steps, we will go through the steps needed to use CodeMirror with Angular.

Package installation

We need to install the @ctrl/ngx-codemirror package. This package provides an Angular component that wraps around the CodeMirror editor. Additionally, we also need to install the codemirror package, which is a peer dependency of @ctrl/ngx-codemirror

We can install both packages using the following command: npm install @ctrl/ngx-codemirror codemirror

Note that the latest version of @ctrl/ngx-codemirror (6.0.0) only supports Angular 15.0.0-0. If you are using a different version of Angular, you can install the previous version of @ctrl/ngx-codemirror (5.1.1) instead. npm install @ctrl/[email protected] codemirror@5

Use

To use the CodeMirror component in our Angular application, we need to first import the CodemirrorModule and FormsModule in our NgModule. We also need to bring in the necessary codemirror files for parsing the language that we want to use.

In our NgModule:

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';

  // add to imports:
  imports: [
    BrowserModule,
    FormsModule,
    CodemirrorModule,
    ...
  ]

In the main entry point of our application (e.g. main.ts), we can import the necessary language files for CodeMirror.

import "codemirror/mode/javascript/javascript";
import "codemirror/mode/markdown/markdown";

Then, we can use the ngx-codemirror component in our template (e.g. app.component.html):

  <ngx-codemirror
    #codemirror
    [options]="codeMirrorOptions"
    [(ngModel)]="obj"
    (ngModelChange)="setEditorContent($event)"
  >
  </ngx-codemirror>

Here, codeMirrorOptions is an object that contains the configuration options for the CodeMirror editor. Some possible options include theme, mode, lineNumbers, lineWrapping, foldGutter, gutters, autoCloseBrackets, matchBrackets, and lint.

codeMirrorOptions: any = {
  theme: "idea",
  mode: "application/ld+json",
  lineNumbers: true, // Whether to show line numbers to the left of the editor
  lineWrapping: true, // Whether CodeMirror should scroll or wrap for long lines.
  foldGutter: true,
  gutters: [
    // Should be an array of CSS class names
    "CodeMirror-linenumbers",
    "CodeMirror-foldgutter",
    "CodeMirror-lint-markers",
  ],
  autoCloseBrackets: true,
  matchBrackets: true, // causes matching brackets to be highlighted whenever the cursor is next to them
  lint: true, // Defines an interface component for showing linting warnings, with pluggable warning sources
  // see https://codemirror.net/3/addon/lint/json-lint.js
};

Styles

For further information, please refer to the official documentation.

For styling examples, please see the following styling examples.

To style the CodeMirror editor, we can import the necessary base CSS files in our stylesheet (e.g. styles.scss):

@import "~codemirror/lib/codemirror";
@import "~codemirror/theme/material";

We can also use the .CodeMirror class in our stylesheet to size the CodeMirror container. For example:

.CodeMirror {
  // 80vh is just an example
  // you can use px, rem and so one.
  height: 80vh;
}

CodeMirror is the outer element of the editor. This should be used for the editor width, height, borders and positioning. Can also be used to set styles that should hold for everything inside the editor (such as font and font size), or to set a background.

Svelte

svelte-codemirror-editor is a Svelte component that allows you to easily integrate the CodeMirror v6+ editor with Svelte.

Features

• Seamless integration with Svelte
• Only include languages you need
• Customize your theme
• Add custom extensions
• Readonly mode
• Compatible with SvelteKit

Installation

To install the svelte-codemirror-editor package, run the following command:

npm install svelte-codemirror-editor

You will also need to install the language package you want to use, for example:

npm i @codemirror/lang-json

If you want to use the One Dark theme, you will need to install it as well:

npm i @codemirror/theme-one-dark

Usage

To use the svelte-codemirror-editor component in your Svelte project, you can import it and use it in your component like this:

<script lang="ts">
  import CodeMirror from "svelte-codemirror-editor";
  import { json } from "@codemirror/lang-json";
  import { oneDark } from "@codemirror/theme-one-dark";

  let value = "";
</script>

<CodeMirror bind:value
    lang={json()}
    theme={oneDark}
    styles={{
        "&": {
            width: "500px",
            maxWidth: "100%",
            height: "50rem",
        },
}}
/>

<style></style>

Props and Events

The CodeMirror component accepts the following props:

• class : string

• value : string

• basic : boolean

• lang : LanguageSupport

• theme : Extension

• extensions : Extension[]

• useTab : boolean

• tabSize : number

• styles : ThemeSpec

• lineWrapping : boolean

• editable : boolean

• readonly : boolean

• placeholder : string | HTMLElement

• on:change={handleChanges} : This is an event listener that binds the change event to the handleChanges callback function. When the user changes the content of the editor, the handleChanges function is called.

Note:

You can access the content of the CodeMirror component using obj.detail in this handleChanges function

const handleChanges = (obj: CustomEvent) => {
  console.log(JSON.parse(obj.detail));
};

But you can also bind the value of the editor to a variable in your component by using the bind:value attribute, and listen to the change event to handle changes to the editor's content.

let value = "";

const handleChanges = () => {
  console.log(JSON.parse(value));
};

This is an example of how to use the component in a Svelte app:

<script lang="ts">
    import CodeMirror from "svelte-codemirror-editor";
    import { json } from "@codemirror/lang-json";
    import { oneDark } from "@codemirror/theme-one-dark";

    let value = "";

     // Handle changes callback function
    const handleChanges = () => {
      console.log(JSON.parse(value))
    }

</script>

<main>
  <CodeMirror
    bind:value
    basic={true} <!-- Basic configuration. Show the line number. Toggle line numbers -->
    useTab={true} <!-- Allows the use of tabulator -->
    tabSize={2} <!-- Defines the number of spaces the tabulator has -->
    lineWrapping={false} <!-- Choose whether or not to break lines -->
    lang={json()}
    theme={oneDark}
    styles={{
        "&": {
            width: "90vw",
            maxWidth: "90vw",
            height: "80vh",
            textAlign: "left", // by default it starts in the center
        },
    }}
    on:change={handleChanges}
/>
</main>

<style></style>

In this way, when the user changes the content of the editor, the handleChanges function is called, and it can do something with the content of the editor (in this case it parse the json and log it).

React