Creating WYSIWYG Document Editor | Natural Language Programming - GeeksforGeeks

01 Mar, 2018
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 www.osmosian.com/cal-4700.zip. 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 that you can see here: www.rhymingreader.com. 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:
QED.
GBlog
Project
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Roadmap to Become a Web Developer in 2022
DSA Sheet by Love Babbar
GET and POST requests using Python
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Working with csv files in Python
SDE SHEET - A Complete Guide for SDE Preparation
XML parsing in Python
Working with zip files in Python
Python | Simple GUI calculator using Tkinter
Simple Chat Room using Python