Creating WYSIWYG Document Editor | Natural Language Programming

Last Updated : 19 Sep, 2023

When my elder son and I finished writing our Plain English compiler, we decided to test its usefulness by adding a what-you-see-is-what-you-get document editor that we could then use to document our system. Two birds with one stone!

Document View

We call this facility the Writer. This is what our instruction manual looks like when you open it in the Writer:

We call this Document View: one line per page. Whole pages (and groups of pages, contiguous or not) can be selected, copied, cut, pasted, duplicated and printed in this view. They can also be saved in Adobe PDF format so folks without the Writer can read them.

Page View

When you open a page, you see that page exactly as it will appear when it is printed (or saved as a PDF page), albeit with sky-blue grid lines to aid in tasteful layout. This is how page 8 of our instruction manual appears on the screen:

In this view, whole pages can be enlarged, reduced, rotated, and spell-checked. And various text and graphic “shapes” can be added, deleted, moved, sized, colored, flipped, mirrored, rotated, copied, cut, pasted, duplicated, grouped, etc. The Home, End, Page Up, and Page Down keys can be used to conveniently flip through the pages, without returning to Document View.

Externalized Pages

Documents (and parts of documents) can be saved, as mentioned above, as PDFs. But the native format for permanent storage is much simpler, and is text only. Consider, for example, the document below, which has just one page with four shapes on it: a pink ellipse, a green triangle, a blue square, and a text box with “ABC” in it:

If you use our “Open as Text” command (or any other text editor) to open this document, this is what you’ll see:

ream cal-3024    page 15840 12240 1 1440      ellipse 0 0 0 0 1000 875 1440 1440 2880 2880      polygon 0 0 0 1500 1000 875 4 4320 1440 5760 2880 4320 2880 4320 1440      rectangle 0 0 0 2100 1000 875 7200 1440 8640 2880 0      text 0 0 0 -1 0 0 10080 1440 14400 2880 0 "title" "osmosian" 1440 "center" 0 0 0 yes         "ABC"      end    end  end

One entry for the whole document, one for each page, and one for each shape on the page. And not a single “<" in sight!

It would be too much to paste the 4,000 Plain English sentences that define the whole Writer here. They are included in the source code that comes with our system . For now, let’s settle for a sample routine:

To group any selected shapes on a page:  If the page is nil, exit.  Create a group shape.  Put "group" into the group shape's kind.  Put the page's scale into the group shape's scale.  Move the page's shapes to some original shapes.  Loop.  Put the original shapes' first into a shape.  If the shape is nil, break.  Remove the shape from the original shapes.  If the shape is not selected, append the shape to the page's shapes; repeat.  Deselect the shape.  Append the shape to the group shape's shapes.  Repeat.    Append the group shape to the page's shapes.  Select the group shape.  Adjust the group shape.

Shapes on pages are drawn back-to-front, so the newly grouped shapes will appear on top of the other shapes on the page.

Not a Toy

Please keep in mind that this is facility is not a “toy.” We used it, as I mentioned above, to write the documentation for our system. And since then it’s been used to produce an 800-page illustrated “teach your kid to read” course . Not to mention several other books for children, numerous training manuals, and presentation materials of all kinds, large and small. This is one of my all-time favorite pages, developed by a grade school teacher in an attempt to settle an age-old question: