Giter Club home page Giter Club logo

prosemirror-docx's Introduction

prosemirror-docx

prosemirror-docx on npm MIT License CI

Export a prosemirror document to a Microsoft Word file, using docx.

image

Overview

prosemirror-docx has a similar structure to prosemirror-markdown, with a DocxSerializerState object that you write to as you walk the document. It is a light wrapper around https://docx.js.org/, which actually does the export. Currently prosemirror-docx is write only (i.e. can export to, but can’t read from *.docx), and has most of the basic nodes covered (see below).

Curvenote uses this to export from @curvenote/editor to word docs, but this library currently only has dependence on docx, prosemirror-model and buffer-image-size - and similar to prosemirror-markdown, the serialization schema can be edited externally (see Extended usage below).

Basic usage

import { defaultDocxSerializer, writeDocx } from 'prosemirror-docx';
import { EditorState } from 'prosemirror-state';
import { writeFileSync } from 'fs'; // Or some other way to write a file

// Set up your prosemirror state/document as you normally do
const state = EditorState.create({ schema: mySchema });

// If there are images, we will need to preload the buffers
const opts = {
  getImageBuffer(src: string) {
    return anImageBuffer;
  },
};

// Create a doc in memory, and then write it to disk
const wordDocument = defaultDocxSerializer.serialize(state.doc, opts);

await writeDocx(wordDocument, (buffer) => {
  writeFileSync('HelloWorld.docx', buffer);
});

Extended usage

Instead of using the defaultDocxSerializer you can override or provide cusome serializers.

import { DocxSerializer, defaultNodes, defaultMarks } from 'prosemirror-docx';

const nodeSerializer = {
  ...defaultNodes,
  my_paragraph(state, node) {
    state.renderInline(node);
    state.closeBlock(node);
  },
};

export const myDocxSerializer = new DocxSerializer(nodeSerializer, defaultMarks);

The state is the DocxSerializerState and has helper methods to interact with docx.

Supported Nodes

  • text
  • paragraph
  • heading (levels)
    • TODO: Support numbering of headings
  • blockquote
  • code_block
    • TODO: No styles supported
  • horizontal_rule
  • hard_break
  • ordered_list
  • unordered_list
  • list_item
  • image
  • math
  • equations (numbered & unnumbered)
  • tables

Planned:

  • Internal References (e.g. see Table 1)

Supported Marks

  • em
  • strong
  • link
    • Note: this is actually treated as a node in docx, so ignored as a prosemirror mark, but supported.
  • code
  • subscript
  • superscript
  • strikethrough
  • underline
  • smallcaps
  • allcaps

Resources

prosemirror-docx's People

Contributors

rowanc1 avatar dylangrandmont avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.