Merge pull request #34 from Williamug/develop

Develop
Williamug · Sep 15, 2024 · 80d26fb · 80d26fb
2 parents 9471f61 + ecfb351
commit 80d26fb
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -33,8 +33,8 @@ MaxiEditor is a free, open source, lightweight, customizable rich text editor de
 To use MaxiEditor via CDN, include the following in your HTML:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maxi-editor@1/dist/maxi-editor.min.css">
-<script src="https://cdn.jsdelivr.net/npm/maxi-editor@1/dist/maxi-editor.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maxi-editor@1.0.8/dist/maxi-editor.min.css">
+<script src="https://cdn.jsdelivr.net/npm/maxi-editor@1.0.8/dist/maxi-editor.min.js"></script>
 ```
 
 #### NPM
@@ -59,12 +59,12 @@ Initialize MaxiEditor in your JavaScript code:
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MaxiEditor Example</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maxi-editor@1/dist/maxi-editor.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maxi-editor@1.0.8/dist/maxi-editor.min.css">
 </head>
 <body>
     <div id="editor" class="maxi-editor"></div>
 
-    <script src="https://cdn.jsdelivr.net/npm/maxi-editor@1/dist/maxi-editor.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maxi-editor@1.0.8/dist/maxi-editor.min.js"></script>
 
     <script>
         const editor = MaxiEditor.set('#editor', {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "maxi-editor",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "MaxiEditor is a lightweight, customizable rich text editor designed for web applications. It allows you to create and edit formatted content within a web page, with a fully customizable toolbar that includes options for text formatting, headings, fonts, and custom plugins. This editor comes pre-packaged with essential features and is highly extendable via plugins.",
   "main": "maxi-editor.js",
   "scripts": {

diff --git a/src/maxi-editor.css b/src/maxi-editor.css
@@ -1 +1,91 @@
-.maxi-editor,body{font-family:Arial,sans-serif}body{margin:0}.editor-container{width:auto;max-width:auto;text-align:left}.maxi-toolbar{display:flex;flex-wrap:wrap;justify-content:left;margin-bottom:3px}button,select{margin:3px;padding:5px 10px;border:1px solid #ccc;border-radius:4px;background-color:#f8f8f8;font-size:14px;cursor:pointer;appearance:none}.maxi-toolbar button{padding:8px 12px;background-color:#eaeaea;border:none;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.maxi-toolbar button i{font-size:18px}.maxi-toolbar button.active{background-color:#1606f5;color:#fff;font-weight:700}.maxi-editor{border:1px solid #ddd;padding:10px;overflow-y:auto;height:auto;background-color:#fff}.link-modal{position:fixed;top:25%;left:30%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;box-shadow:0 0 10px rgba(0,0,0,.1);z-index:1000;border-radius:8px}.link-modal input{width:100%;margin:10px 0;padding:4px;border:1px solid #ccc;border-radius:4px}.link-modal button{padding:4px 10px;margin:5px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.link-modal button:hover{background-color:#0056b3}.link-modal button#cancel-btn{background-color:#dc3545}.link-modal button#cancel-btn:hover{background-color:#c82333}
+.maxi-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: left;
+    margin-bottom: 3px
+}
+
+button,
+select {
+    margin: 3px;
+    padding: 5px 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #f8f8f8;
+    font-size: 14px;
+    cursor: pointer;
+    appearance: none
+}
+
+.maxi-toolbar button {
+    padding: 8px 12px;
+    background-color: #eaeaea;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+
+.maxi-toolbar button i {
+    font-size: 18px
+}
+
+.maxi-toolbar button.active {
+    background-color: #1606f5;
+    color: #fff;
+    font-weight: 700
+}
+
+.maxi-editor {
+    border: 1px solid #ddd;
+    padding: 10px;
+    overflow-y: auto;
+    font-family: Arial, sans-serif;
+    height: auto;
+    background-color: #fff
+}
+
+.link-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
+    z-index: 1000;
+    border-radius: 8px
+}
+
+.link-modal input {
+    width: 100%;
+    margin: 10px 0;
+    padding: 4px;
+    border: 1px solid #ccc;
+    border-radius: 4px
+}
+
+.link-modal button {
+    padding: 4px 10px;
+    margin: 5px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer
+}
+
+.link-modal button:hover {
+    background-color: #0056b3
+}
+
+.link-modal button#cancel-btn {
+    background-color: #dc3545
+}
+
+.link-modal button#cancel-btn:hover {
+    background-color: #c82333
+}