stckme / tiptapy Goto Github PK
View Code? Open in Web Editor NEWLibrary that generates HTML output from JSON export of tiptap editor
License: MIT License
Library that generates HTML output from JSON export of tiptap editor
License: MIT License
Currently, the documentation is written in the README.md
file and only gives the basic use case of the library. Better documentation can be hosted somewhere like Read the Docs and would have installation guidelines, examples, contribution guidelines and other related things to the library.
Add code block tiptapy
that converts the below JSON
{
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [
{
"type": "text",
"marks": [
{
"type": "code"
}
],
"text": "PEP 20"
},
{
"type": "text",
"text": " The Zen of Python"
}
]
},
{
"type": "code_block",
"content": [
{
"type": "text",
"text": "import this"
}
]
}
]
}
to the following HTML
<p><code>PEP 20</code> The Zen of Python</p><pre><code>import this</code></pre>
The statement that generated this JSON in the editor is given below
PEP 20
The Zen of Python
import this
Add support that can convert the given JSON:
{
"type": "image",
"attrs": {
"src": "scroll.jpg",
"alt": "scroll logo",
"caption": "Foo bar"
}
To this html string:
<img src="scroll.jpg",alt="scroll logo"><figcaption>Foo bar</figcaption>
Add support for a title tag that can convert the given below JSON:
{
"type": "title",
"content": [
{
"type": "text",
"text": "Top News"
}
]
}
To the the given below html string:
<h1>Top News</h1>
If the virtual env does not have jinja installed tiptapy throws a dependency error for jinja.
python -m pip install tiptapy
import titapy
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
ModuleNotFoundError: No module named 'titapy'
>>> import titapy
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
ModuleNotFoundError: No module named 'titapy'
>>> import tiptapy
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
File "/Users/glados/workspace/tiptapy/tiptapy/__init__.py", line 5, in <module>
from jinja2 import FileSystemLoader, Environment, select_autoescape
ModuleNotFoundError: No module named 'jinja2'
setup.py
Travis build failing with the given trace
___________________ ERROR collecting tests/test_tranform.py ____________________
tests/test_tranform.py:31: in <module>
json_dir_data = scan_json_datadir()
tests/test_tranform.py:11: in scan_json_datadir
json_files = os.listdir(json_dir)
E FileNotFoundError: [Errno 2] No such file or directory: 'data/json/'
!!!!!!!!!!!!!!!!!!! Interrupted: 1 errors during collection !!!!!!!!!!!!!!!!!!!!
=========================== 1 error in 0.10 seconds ============================
The command "pytest" exited with 2.
I just ran through tiptapy and it gave an unexpected error.
{
"type": "doc",
"content": [
{
"type": "title"
},
{
"type": "paragraph"
},
{
"type": "paragraph"
},
{
"type": "paragraph"
}
]
}
Error trace
TypeError Traceback (most recent call last)
<ipython-input-1-667680fbd56c> in <module>
127 if __name__ == "__main__":
128 s = open("test.json").read()
--> 129 print(to_html(s))
<ipython-input-1-667680fbd56c> in to_html(s)
122 def to_html(s):
123 in_data = json.loads(s)
--> 124 return convert_any(in_data)
125
126
<ipython-input-1-667680fbd56c> in convert_any(in_data)
117 typ = in_data.get("type")
118 renderer = renderers.get(typ)
--> 119 return renderer.render(in_data)
120
121
<ipython-input-1-667680fbd56c> in render(self, in_data)
13
14 def render(self, in_data):
---> 15 out = self.inner_render(in_data)
16 if self.wrap_tag:
17 return f"<{self.wrap_tag}>{out}</{self.wrap_tag}>"
<ipython-input-1-667680fbd56c> in inner_render(self, nodes)
30 assert renderer, f'Unsupported node_type: "{node_type}"'
31 if renderer:
---> 32 out += renderer.render(node)
33 return out
34
<ipython-input-1-667680fbd56c> in render(self, in_data)
13
14 def render(self, in_data):
---> 15 out = self.inner_render(in_data)
16 if self.wrap_tag:
17 return f"<{self.wrap_tag}>{out}</{self.wrap_tag}>"
<ipython-input-1-667680fbd56c> in inner_render(self, nodes)
25 def inner_render(self, nodes: List):
26 out = ""
---> 27 for node in nodes.get("content"):
28 node_type = node.get("type")
29 renderer = renderers.get(node_type)
TypeError: 'NoneType' object is not iterable
Add unit tests to check the basic functions of tiptapy
. Tests can be written with any of the testing framework offered by the standard library like unittest or even an external testing framework like pytest or even Nose.
I personally prefer Pytest because:
Good discussion on why to choose Pytest :
Add support to handle ordered list like:
1. One
2. Two
3. Three
Expected HTML:
<ol><li><p>One</p></li><li><p>Two</p></li><li><p>Three</p></li></ol>
Url with quotes in them breaks rendering.
Hello everything is fine?
Very cool library!
Is there any option to pass all the attributes that are in the node to the attr of the html or style?
For example:
Transforming:
{
"type": "paragraph",
"content": [{"type": "text", "text": "Hello"}],
"attrs": {"textAlign": "left"},
}
To:
<p style="text-align: left">Hello</p>
I thank the attention
Input JSON:
{
"type": "featureimage",
"attrs": {
"src":"https://api.scrollstack.com/images/ckpefxyipl1585807269.jpeg",
"alt":"",
"caption":"text"
}
}
Expected Output:
<figure class="featured-image">
<picture>
<img src="../img/article/card1.png" alt="featured-image">
</picture>
<figcaption>Caption</figcaption>
</figure>
Setting up a continuous integration service like Travis CI which checks if all the tests pass or not.
Travis docs for Python: https://docs.travis-ci.com/user/languages/python/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.