DataTables logo
≡

ProseMirror

Use ProseMirror RTE library with Editor to allow Rich Text to be added to cells in editor.

proseMirror is a RTE plugin that allows the user to add rich text to cells. This plugin provides integration between (https://prosemirror.net) and Editor adding the proseMirror field type to Editor. It also requires the developer to build their own ProseMirror since it is not distributed as a single file. This build should include - "ProseMirror.basicSchema", "ProseMirror.exampleSetup", "ProseMirror.EditorState", "ProseMirror.DOMParser", "ProseMirror.EditorView"

Use

This plug-in can be obtained and used in multiple different ways.

Browser

This plug-in is available on the DataTables CDN:

JS

The plug-in will then automatically register itself against a global DataTables instance. This file can also be used if you are using an AMD loader such as Require.js.

Note that if you are using multiple plug-ins, it can be beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

NPM

The plug-ins are all available on NPM (which can also be used with Yarn or any other Javascript package manager) as part of the datatables.net-plugins package. To use this plug-in, first install the plug-ins package:

npm install datatables.net-plugins

Then import datatables.net, any other DataTables extensions you need, plus the plug-in:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/editorFields/editor.proseMirror.mjs';

Example

Including an example render function which will display the text in the RTE in the cell in table view.
var editor = new DataTable.Editor({
  table: "#example",
  fields: [
    ...
    {
      label: "Text",
      name: "text",
      type: "proseMirror"
    }
  ]
});

new DataTable("#example", {
  // ...
  columns: [
    // ...
    {
      data: "text",
      render: function(data,type,row){
        try {
          var domSer = ProseMirror.DOMSerializer.fromSchema(mySchema);
          var parData = JSON.parse(data);

          parData = ProseMirror.EditorState.fromJSON(
            { schema: mySchema, plugins: plugins },
            parData
          );

          var dom = domSer.serializeFragment(parData.doc.content);

          div.empty().append(dom);
          return div.html();

        } catch (err) {

          return "This is invalid JSON " + data;

        }
      }
    }
  ]
})

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!