Skip to content

Commit f1580de

Browse files
marmouremarmoure
committed
[feature] use the lwdita example to showcase editor capabilities
1 parent bfc42ba commit f1580de

3 files changed

Lines changed: 215 additions & 147 deletions

File tree

‎packages/prosemirror-lwdita-demo/cypress/e2e/download.cy.ts‎

Lines changed: 103 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -17,68 +17,113 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
1717

1818
export const mockXML = `<?xml version="1.0" encoding="UTF-8"?>
1919
<!DOCTYPE topic PUBLIC "-//OASIS//DTD LIGHTWEIGHT DITA Topic//EN" "lw-topic.dtd">
20-
<topic id="petal">
21-
<title>What is Petal?</title>
22-
<body>
23-
<p dir="ltr">Sadly many projects lack proper documentation, but why is that?</p>
24-
<fig>
25-
<image href="https://static.evolvedbinary.com/petal/eb-rose-small.png">
26-
<alt></alt>
27-
</image>
28-
</fig>
29-
<p dir="ltr">The effort that goes into coding great software is paramount, but often
30-
pointless if others can't understand and use the software. Most developers have
31-
witnessed brilliant code with incomplete or entirely missing documentation. Petal lowers
32-
the barrier to delivering this critical part of any software product.</p>
33-
<p dir="ltr">Often it is difficult or time-consuming to add documentation to a project.
34-
Potentially great projects stay in obscurity because users and developers don't have the
35-
information they need to understand them and use them.</p>
36-
<p dir="ltr">Our dream is to make adding documentation to a project as easy as typing text
37-
into a web browser and hitting save. This approach would lead to more usable projects
38-
through robust and helpful documentation.</p>
39-
<p dir="ltr">Petal is a first of its kind technical documentation editor that realises this
40-
dream!</p>
41-
<p dir="ltr">Petal makes it simple to:</p>
20+
<topic id="fullTopic">
21+
<title>
22+
<b>bold</b>
23+
and <em>emphasized</em> and <i>italic</i> and <ph>Phrase content</ph> and
24+
<strong>strong</strong>
25+
and <sub>subscript</sub> and <sup>superscipt</sup> and <tt>tele type</tt> and
26+
<u>underline</u>
27+
<image href="https://picsum.photos/200/300">
28+
<alt>alt text</alt>
29+
</image>
30+
</title>
31+
<shortdesc>Short description of the full topic.</shortdesc>
32+
<prolog>
33+
<metadata>
34+
<othermeta name="test" content="test"/>
35+
</metadata>
36+
</prolog>
37+
<body dir="ltr">
38+
<p>Paragraph content</p>
39+
<p>
40+
<b>Bold</b>
41+
and <em>emphasized</em> and <i>italic</i> and <ph>Phrase content</ph> and
42+
<strong>strong</strong>
43+
and <sub>subscript</sub> and <sup>superscipt</sup> and <tt>tele type</tt> and
44+
<u>underline</u>.
45+
</p>
4246
<ul>
43-
<li dir="ltr">
44-
<p dir="ltr">Create new pages of documentation</p>
45-
</li>
46-
<li dir="ltr">
47-
<p dir="ltr">Update existing pages of documentation</p>
48-
</li>
49-
<li dir="ltr">
50-
<p dir="ltr">Submit your work for review</p>
51-
</li>
52-
<li dir="ltr">
53-
<p dir="ltr">Accept documentation contributions from the community</p>
54-
</li>
55-
<li dir="ltr">
56-
<p dir="ltr">Integrate with version control repositories such as GitHub</p>
47+
<li>
48+
<p>Unordered list item</p>
5749
</li>
5850
</ul>
59-
<p dir="ltr">Petal is:</p>
60-
<ul>
61-
<li dir="ltr">
62-
<p dir="ltr">A Visual Technical Documentation Editor</p>
63-
</li>
64-
<li dir="ltr">
65-
<p dir="ltr">Accessible through a Web Browser just like a Wiki</p>
51+
<ol>
52+
<li>
53+
<p>Ordered list item</p>
6654
</li>
67-
<li dir="ltr">
68-
<p dir="ltr">Filling a gap in the market where other offerings are too complex</p>
69-
</li>
70-
<li dir="ltr">
71-
<p dir="ltr">Open Source</p>
72-
</li>
73-
<li dir="ltr">
74-
<p dir="ltr">Standards compliant</p>
75-
</li>
76-
<li dir="ltr">
77-
<p dir="ltr">Developed with the latest web technologies</p>
78-
</li>
79-
</ul>
80-
<p dir="ltr">Bad documentation keeps good projects from being GREAT.</p>
81-
<p dir="ltr">Petal helps anyone to contribute documentation to a project with ease. If you know how to type text on a computer, then you already know how to use Petal.</p>
55+
</ol>
56+
<dl>
57+
<dlentry>
58+
<dt>Definition term</dt>
59+
<dd>
60+
<p>Definition description</p>
61+
</dd>
62+
</dlentry>
63+
</dl>
64+
<pre>Preformatted content</pre>
65+
<audio autoplay="false" controls="true" loop="false" muted="true">
66+
<desc>Theme song for the LwDITA podcast</desc>
67+
<fallback>
68+
<p>The theme song is not available.</p>
69+
</fallback>
70+
<media-source href="https://upload.wikimedia.org/wikipedia/commons/a/aa/1943_Nov_14_NYPhil_Bernstein.ogg" format="application/ogg"/>
71+
<media-track srclang="en"/>
72+
</audio>
73+
<video outputclass="videoElement" width="320" height="240" controls="true">
74+
<desc>Kool-Aid Commercial, Debut of Pitcher Man</desc>
75+
<video-poster href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm/120px--1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm.jpg"/>
76+
<media-source href="https://upload.wikimedia.org/wikipedia/commons/7/74/1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm"/>
77+
</video>
78+
<example>
79+
<title>title</title>
80+
</example>
81+
<simpletable>
82+
<title>Table title</title>
83+
<sthead>
84+
<stentry>
85+
<p>Header 1</p>
86+
</stentry>
87+
<stentry>
88+
<p>Header 2</p>
89+
</stentry>
90+
</sthead>
91+
<strow>
92+
<stentry>
93+
<p>Row 1, Cell 1</p>
94+
</stentry>
95+
<stentry>
96+
<p>Row 1, Cell 2</p>
97+
</stentry>
98+
</strow>
99+
<strow>
100+
<stentry>
101+
<p>Row 2, Cell 1</p>
102+
</stentry>
103+
<stentry>
104+
<p>Row 2, Cell 2</p>
105+
</stentry>
106+
</strow>
107+
</simpletable>
108+
<fig>
109+
<title>Figure title</title>
110+
<desc>Figure description</desc>
111+
<image href="https://placehold.co/300x300">
112+
<alt>alt text</alt>
113+
</image>
114+
</fig>
115+
<note type="note">
116+
<p>Note content</p>
117+
</note>
118+
<section>
119+
<title>Section title</title>
120+
<p>Section content</p>
121+
</section>
122+
<div>
123+
<fn id="footnote">
124+
<p>A footnote</p>
125+
</fn>
126+
</div>
82127
</body>
83128
</topic>
84129
`;

‎packages/prosemirror-lwdita-demo/example-xdita/06-lwdita-schema-example.xml‎

Lines changed: 5 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@
1818
</metadata>
1919
</prolog>
2020
<body dir="ltr">
21-
<!--
22-
((%list-blocks;)*, section*, div?)
23-
list-blocks = p|ul|ol|dl|pre|audio|video|example|simpletable|fig|note
24-
-->
2521
<p>Paragraph content</p>
2622
<p>
2723
<b>Bold</b>
@@ -50,26 +46,20 @@
5046
</dl>
5147
<pre>Preformatted content</pre>
5248
<audio autoplay="false" controls="true" loop="false" muted="true">
53-
<!--
54-
((desc)?,(fallback)?,(media-source)*,(media-track)*)*
55-
-->
5649
<desc>Theme song for the LwDITA podcast</desc>
5750
<fallback>
5851
<p>The theme song is not available.</p>
5952
</fallback>
6053
<media-source href="https://upload.wikimedia.org/wikipedia/commons/a/aa/1943_Nov_14_NYPhil_Bernstein.ogg" format="application/ogg"/>
61-
<media-track srclang="en" value="theme-song.vtt"/>
54+
<media-track srclang="en"/>
6255
</audio>
6356
<video outputclass="videoElement" width="320" height="240" controls="true">
64-
<desc>Kool-Aid Commercial, Debut of Pitcher Man</desc>
65-
<video-poster href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm/120px--1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm.jpg" />
66-
<media-source href="https://upload.wikimedia.org/wikipedia/commons/7/74/1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm" />
57+
<desc>Kool-Aid Commercial, Debut of Pitcher Man</desc>
58+
<video-poster href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm/120px--1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm.jpg"/>
59+
<media-source href="https://upload.wikimedia.org/wikipedia/commons/7/74/1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm"/>
6760
</video>
6861
<example>
6962
<title>title</title>
70-
<!--
71-
p|ul|ol|dl|pre|audio|video|simpletable|fig|note
72-
-->
7363
</example>
7464
<simpletable>
7565
<title>Table title</title>
@@ -99,36 +89,21 @@
9989
</strow>
10090
</simpletable>
10191
<fig>
102-
<!--
103-
(title?, desc?, (%fig-blocks;|image|xref)*)
104-
-->
10592
<title>Figure title</title>
10693
<desc>Figure description</desc>
10794
<image href="https://placehold.co/300x300">
10895
<alt>alt text</alt>
10996
</image>
11097
</fig>
111-
<note>
112-
<!--
113-
<!ENTITY % simple-blocks "p|ul|ol|dl|pre|audio|video|example|note">
114-
-->
98+
<note type="note">
11599
<p>Note content</p>
116100
</note>
117101
<section>
118102
<title>Section title</title>
119-
<!--
120-
p|ul|ol|dl|pre|audio|video|example|simpletable|fig|note
121-
-->
122103
<p>Section content</p>
123104
</section>
124105
<div>
125-
<!--
126-
p|ul|ol|dl|pre|audio|video|example|simpletable|fig|note
127-
-->
128106
<fn id="footnote">
129-
<!--
130-
"p|ul|ol|dl"
131-
-->
132107
<p>A footnote</p>
133108
</fn>
134109
</div>

0 commit comments

Comments
 (0)