Skip to content

Commit a617d02

Browse files
saradab-mindfiresaradab-mindfire
authored
fix(core): Merge pull request #155 from mindfiredigital/dev
Dev
2 parents ebcd5ca + c5c7ad1 commit a617d02

File tree

2 files changed

+276
-0
lines changed

2 files changed

+276
-0
lines changed

‎packages/core/README.md‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<h1 align="center">TextIgniterJS</h1><br><br>
2+
<p align="center">
3+
<a href="https://www.npmjs.com/package/@mindfiredigital/textigniterjs"><img src="https://img.shields.io/npm/v/@mindfiredigital/textigniterjs.svg?sanitize=true" alt="Version"></a>
4+
<a href="https://www.npmjs.com/package/@mindfiredigital/textigniterjs"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs"></a>
5+
</p>
6+
7+
<br>
8+
9+
<p align="center"> Experience a Lightweight , powerful and intuitive HTML Editor built with Core Typescript. </p>
10+
11+
The `@mindfiredigital/textigniterjs` is a tool that allows developers to integrate TextIgniter.
12+
<br>
13+
14+
<p align="center">
15+
<!-- <img alt="Screenshot of the React Text Igniter" src="https://res.cloudinary.com/dxf1kplcx/image/upload/v1725448061/react-text-igniter-screenshot_c4dq9c.png"\>
16+
</p> -->
17+
18+
## Live Demo
19+
20+
Click the button below to open the project on StackBlitz.
21+
22+
<a href="https://stackblitz.com/edit/stackblitz-starters-kezevu?file=index.html" target="_blank">
23+
<img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz">
24+
</a>
25+
26+
## Table of Contents
27+
28+
- [Features](#features)
29+
- [Installation](#installation)
30+
- [Getting Started](#getting-started)
31+
- [Contributing](#contributing)
32+
- [License](#license)
33+
34+
<br>
35+
36+
## Features
37+
38+
- **Bold**: When you apply bold formatting to text, it makes the selected text appear thicker and more prominent.
39+
- **Italic**: Italic text is slanted to the right.
40+
- **Underline**: Underlining text places a horizontal line beneath it.
41+
- **Subscript**: Subscript lowers the selected text below the baseline.
42+
- **Superscript**: Superscript raises the selected text above the baseline.
43+
- **Left Align**: This feature aligns text to the left margin, creating a straight left edge.
44+
- **Center Align**: Center alignment places text in the middle of the page or text box.
45+
- **Right Align**: Text is aligned to the right margin, creating a straight right edge..
46+
- **Bullet List**: Bullet lists present information as a series of items with bullets.
47+
- **Numbered List**: Numbered lists provide a sequential order to items.
48+
- **Insert Table**: This feature allows you to create tables to organize data.
49+
- **Insert Layout**: This feature allows you to create Layout to organize data.
50+
- **Heading**: Headings are typically used to divide a document into sections or chapters. They are usually styled differently, such as with larger text or bold formatting.
51+
- **Hyperlink**: A hyperlink is a clickable link that connects to a webpage or another location within the document.
52+
- **Image**: This feature allows you to insert images or graphics into your document to enhance its visual appeal or convey additional information.
53+
- **GETHTML**: This feature allows you to get HTML for the data of editor.
54+
- **GETJSON**: This feature allows you to get JSON for the data of editor.
55+
- **Custom Height**: This feature allows you to set height of editor.
56+
57+
<br>
58+
59+
## Installation
60+
61+
To install the `@mindfiredigital/textigniterjs` npm package in your project, use the following command:
62+
63+
```bash
64+
npm install @mindfiredigital/textigniterjs
65+
```
66+
67+
<br>
68+
69+
## Getting Started
70+
71+
- **Initialization**: Initialize the TextIgniter in your project.
72+
73+
```javascript
74+
<!DOCTYPE html>
75+
<html lang="en">
76+
<head>
77+
<meta charset="UTF-8" />
78+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
79+
<title>TextIgniterJS</title>
80+
</head>
81+
<body>
82+
<div id="editor"></div>
83+
84+
<script src="node_modules/@mindfiredigital/textigniterjs/dist/index.js"></script>
85+
86+
<script>
87+
// Initialize the RichTextEditor with specific features
88+
const config = {
89+
features: [
90+
'bold',
91+
'italic',
92+
'underline',
93+
'subscript',
94+
'superscript',
95+
'left_align',
96+
'center_align',
97+
'right_align',
98+
'justify',
99+
'bullet_list',
100+
'numbered_list',
101+
'insert_table',
102+
'insert_layout',
103+
'heading',
104+
'hyperlink',
105+
'image',
106+
],
107+
};
108+
const editor = new TextIgniter('editor', config);
109+
110+
// Example usage of getHtml and getJson methods
111+
function getEditorContent() {
112+
console.log('HTML content:', editor.getHtml());
113+
console.log('JSON content:', editor.getJson());
114+
}
115+
116+
const contentButton = document.createElement('button');
117+
contentButton.innerText = 'Get Content';
118+
contentButton.onclick = getEditorContent;
119+
document.body.appendChild(contentButton);
120+
</script>
121+
</body>
122+
</html>
123+
124+
125+
```
126+
127+
<br>
128+
129+
## Contributing
130+
131+
We welcome contributions from the community. If you'd like to contribute to the `textigniterjs` npm package, please follow our [Contributing Guidelines](CONTRIBUTING.md).
132+
<br>
133+
134+
## License
135+
136+
Copyright (c) Mindfire Digital llp. All rights reserved.
137+
138+
Licensed under the MIT license.

‎packages/web-component/README.md‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<h1 align="center">TextIgniterJS</h1><br><br>
2+
<p align="center">
3+
<a href="https://www.npmjs.com/package/@mindfiredigital/textigniterjs"><img src="https://img.shields.io/npm/v/@mindfiredigital/textigniterjs.svg?sanitize=true" alt="Version"></a>
4+
<a href="https://www.npmjs.com/package/@mindfiredigital/textigniterjs"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs"></a>
5+
</p>
6+
7+
<br>
8+
9+
<p align="center"> Experience a Lightweight , powerful and intuitive HTML Editor built with Core Typescript. </p>
10+
11+
The `@mindfiredigital/textigniterjs` is a tool that allows developers to integrate TextIgniter.
12+
<br>
13+
14+
<p align="center">
15+
<!-- <img alt="Screenshot of the React Text Igniter" src="https://res.cloudinary.com/dxf1kplcx/image/upload/v1725448061/react-text-igniter-screenshot_c4dq9c.png"\>
16+
</p> -->
17+
18+
## Live Demo
19+
20+
Click the button below to open the project on StackBlitz.
21+
22+
<a href="https://stackblitz.com/edit/stackblitz-starters-kezevu?file=index.html" target="_blank">
23+
<img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz">
24+
</a>
25+
26+
## Table of Contents
27+
28+
- [Features](#features)
29+
- [Installation](#installation)
30+
- [Getting Started](#getting-started)
31+
- [Contributing](#contributing)
32+
- [License](#license)
33+
34+
<br>
35+
36+
## Features
37+
38+
- **Bold**: When you apply bold formatting to text, it makes the selected text appear thicker and more prominent.
39+
- **Italic**: Italic text is slanted to the right.
40+
- **Underline**: Underlining text places a horizontal line beneath it.
41+
- **Subscript**: Subscript lowers the selected text below the baseline.
42+
- **Superscript**: Superscript raises the selected text above the baseline.
43+
- **Left Align**: This feature aligns text to the left margin, creating a straight left edge.
44+
- **Center Align**: Center alignment places text in the middle of the page or text box.
45+
- **Right Align**: Text is aligned to the right margin, creating a straight right edge..
46+
- **Bullet List**: Bullet lists present information as a series of items with bullets.
47+
- **Numbered List**: Numbered lists provide a sequential order to items.
48+
- **Insert Table**: This feature allows you to create tables to organize data.
49+
- **Insert Layout**: This feature allows you to create Layout to organize data.
50+
- **Heading**: Headings are typically used to divide a document into sections or chapters. They are usually styled differently, such as with larger text or bold formatting.
51+
- **Hyperlink**: A hyperlink is a clickable link that connects to a webpage or another location within the document.
52+
- **Image**: This feature allows you to insert images or graphics into your document to enhance its visual appeal or convey additional information.
53+
- **GETHTML**: This feature allows you to get HTML for the data of editor.
54+
- **GETJSON**: This feature allows you to get JSON for the data of editor.
55+
- **Custom Height**: This feature allows you to set height of editor.
56+
57+
<br>
58+
59+
## Installation
60+
61+
To install the `@mindfiredigital/textigniterjs` npm package in your project, use the following command:
62+
63+
```bash
64+
npm install @mindfiredigital/textigniterjs
65+
```
66+
67+
<br>
68+
69+
## Getting Started
70+
71+
- **Initialization**: Initialize the TextIgniter in your project.
72+
73+
```javascript
74+
<!DOCTYPE html>
75+
<html lang="en">
76+
<head>
77+
<meta charset="UTF-8" />
78+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
79+
<title>TextIgniterJS</title>
80+
</head>
81+
<body>
82+
<div id="editor"></div>
83+
84+
<script src="node_modules/@mindfiredigital/textigniterjs/dist/index.js"></script>
85+
86+
<script>
87+
// Initialize the RichTextEditor with specific features
88+
const config = {
89+
features: [
90+
'bold',
91+
'italic',
92+
'underline',
93+
'subscript',
94+
'superscript',
95+
'left_align',
96+
'center_align',
97+
'right_align',
98+
'justify',
99+
'bullet_list',
100+
'numbered_list',
101+
'insert_table',
102+
'insert_layout',
103+
'heading',
104+
'hyperlink',
105+
'image',
106+
],
107+
};
108+
const editor = new TextIgniter('editor', config);
109+
110+
// Example usage of getHtml and getJson methods
111+
function getEditorContent() {
112+
console.log('HTML content:', editor.getHtml());
113+
console.log('JSON content:', editor.getJson());
114+
}
115+
116+
const contentButton = document.createElement('button');
117+
contentButton.innerText = 'Get Content';
118+
contentButton.onclick = getEditorContent;
119+
document.body.appendChild(contentButton);
120+
</script>
121+
</body>
122+
</html>
123+
124+
125+
```
126+
127+
<br>
128+
129+
## Contributing
130+
131+
We welcome contributions from the community. If you'd like to contribute to the `textigniterjs` npm package, please follow our [Contributing Guidelines](CONTRIBUTING.md).
132+
<br>
133+
134+
## License
135+
136+
Copyright (c) Mindfire Digital llp. All rights reserved.
137+
138+
Licensed under the MIT license.

0 commit comments

Comments
 (0)