Skip to content

Commit

Permalink
feat(editor)
Browse files Browse the repository at this point in the history
  • Loading branch information
tikrack committed Dec 7, 2024
1 parent 344c37d commit 004ed2c
Show file tree
Hide file tree
Showing 9 changed files with 554 additions and 4,995 deletions.
37 changes: 37 additions & 0 deletions assets/css/autoComplete.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
.autoComplete {
position: absolute;
top: 0;
right: 0;
z-index: 10000;
border-radius: 15px;
background-color: #5500ff;
width: 200px;
min-height: 100px;
}

.code{
border: 1px solid lightgray;
border-radius: 20px;
overflow: hidden;
}

.ͼ1.cm-focused {
outline: 0 !important;
}

.ͼ1 .cm-lineNumbers .cm-gutterElement{
display: flex;
justify-content: center;
align-content: center;
padding: 0 15px 0 5px;
color: #ff5c00;
}

.ͼ2 .cm-activeLineGutter,
.ͼ2 .cm-gutters{
background: #ffeded;
}

.cm-activeLine{
background-color: #fff0e6 !important;
}
400 changes: 400 additions & 0 deletions assets/js/autoComplete.js

Large diffs are not rendered by default.

56 changes: 33 additions & 23 deletions assets/salam/script/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ var Module = {
onRuntimeInitialized: () => {
console.log("Salam loaded successfully");

if (elm_code.value !== "") {
if (elm_code.innerText !== "") {
runSalam(false);
}
},
Expand Down Expand Up @@ -158,7 +158,7 @@ const captureOutput = (showOutput, arguments) => {
const runLint = () => {
console.log("Running Salam lint...");

const code = elm_code.value.toString().trim();
const code = elm_code.innerText.toString().trim();
if (!code) {
return;
}
Expand All @@ -167,14 +167,29 @@ const runLint = () => {

const res = captureLint(arguments);
if (res !== null) {
elm_code.value = res.toString().trim();
elm_code.innerText = res.toString().trim();
}
};

const runSalam = (showOutput) => {
console.log("Running Salam code...");

const code = elm_code.value.toString().trim();
let code = elm_code.innerText;
// function replaceNbsps(str) {
// var re = new RegExp(String.fromCharCode(160), "g");
// return str.replace(re, " ");
// }
// code = replaceNbsps(code)

console.log(code)

function strip(html){
let doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || "";
}

code = strip(code);

if (!code) {
elm_error.innerHTML = "";
elm_output.innerHTML = "";
Expand All @@ -188,27 +203,22 @@ const runSalam = (showOutput) => {
};

// Events
elm_code.addEventListener("keydown", (event) => {
if (event.key === "Tab") {
event.preventDefault();

const textarea = event.target;
const start = textarea.selectionStart;
const end = textarea.selectionEnd;

textarea.value = textarea.value.substring(0, start) + "\t" + textarea.value.substring(end);
textarea.selectionStart = textarea.selectionEnd = start + 1;
}
});

function setCaretPosition(el, pos) {
const range = document.createRange();
const sel = window.getSelection();
range.setStart(el.childNodes[0] || el, pos);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
elm_code.addEventListener("input", () => {
localStorage.setItem("code", elm_code.value)
elm_copy_code.value = elm_code.value
localStorage.setItem("code", elm_code.innerText)
elm_copy_code.value = elm_code.innerText
runSalam(false);
});

elm_run_code.addEventListener("click", () => {
elm_copy_code.value = elm_code.value
elm_copy_code.value = elm_code.innerText
runSalam(false)
})

Expand Down Expand Up @@ -258,13 +268,13 @@ document.body.appendChild(script);
window.addEventListener("load", () => {
elm_code.focus();

if (elm_code.value.trim() === "") {
if (elm_code.innerText.trim() === "") {
if (localStorage && localStorage.getItem) {
elm_code.value = localStorage.getItem("code");
elm_code.innerText = localStorage.getItem("code");
}
}

elm_copy_code.value = elm_code.value;
elm_copy_code.value = elm_code.innerText;
});

// Cache
Expand Down
28 changes: 16 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
}
</style>
<link rel="stylesheet" href="./assets/css/index.css">
<link rel="stylesheet" href="./assets/css/autoComplete.css">
</head>
<body class="h-[100vh]">

Expand Down Expand Up @@ -81,28 +82,31 @@
<form action="" method="post" class="flex gap-2">
<input type="text" name="title" class="input_title transition-all duration-300 rounded-[10px] placeholder-gray-400 w-0 p-0 hidden" placeholder="عنوان مورد نظر..." required minlength="3">
<textarea name="code" class="copy_code hidden p-0 m-0"></textarea>
<!-- <button type="submit" class="save h-[50px] active:opacity-80 px-2 rounded-[15px] bg-[#D1FF6E] flex justify-center items-center gap-2 text-black">-->
<!-- <span class="title">ذخیره</span>-->
<!-- <svg viewBox="0 0 24 24" class="w-[22px]" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!-- <g id="SVGRepo_bgCarrier" stroke-width="0"></g>-->
<!-- <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>-->
<!-- <g id="SVGRepo_iconCarrier">-->
<!-- <path d="M12.89 5.87891H5.11C3.4 5.87891 2 7.27891 2 8.98891V20.3489C2 21.7989 3.04 22.4189 4.31 21.7089L8.24 19.5189C8.66 19.2889 9.34 19.2889 9.75 19.5189L13.68 21.7089C14.96 22.4089 16 21.7989 16 20.3489V8.98891C16 7.27891 14.6 5.87891 12.89 5.87891Z" fill="#292D32"></path>-->
<!-- <path d="M21.9998 5.11V16.47C21.9998 17.92 20.9598 18.53 19.6898 17.83L17.7598 16.75C17.5998 16.66 17.4998 16.49 17.4998 16.31V8.99C17.4998 6.45 15.4298 4.38 12.8898 4.38H8.81984C8.44984 4.38 8.18984 3.99 8.35984 3.67C8.87984 2.68 9.91984 2 11.1098 2H18.8898C20.5998 2 21.9998 3.4 21.9998 5.11Z" fill="#292D32"></path>-->
<!-- </g>-->
<!-- </svg>-->
<!-- </button>-->
<button type="submit" class="save h-[50px] active:opacity-80 px-2 rounded-[15px] bg-[#D1FF6E] flex justify-center items-center gap-2 text-black">
<span class="title">ذخیره</span>
<svg viewBox="0 0 24 24" class="w-[22px]" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M12.89 5.87891H5.11C3.4 5.87891 2 7.27891 2 8.98891V20.3489C2 21.7989 3.04 22.4189 4.31 21.7089L8.24 19.5189C8.66 19.2889 9.34 19.2889 9.75 19.5189L13.68 21.7089C14.96 22.4089 16 21.7989 16 20.3489V8.98891C16 7.27891 14.6 5.87891 12.89 5.87891Z" fill="#292D32"></path>
<path d="M21.9998 5.11V16.47C21.9998 17.92 20.9598 18.53 19.6898 17.83L17.7598 16.75C17.5998 16.66 17.4998 16.49 17.4998 16.31V8.99C17.4998 6.45 15.4298 4.38 12.8898 4.38H8.81984C8.44984 4.38 8.18984 3.99 8.35984 3.67C8.87984 2.68 9.91984 2 11.1098 2H18.8898C20.5998 2 21.9998 3.4 21.9998 5.11Z" fill="#292D32"></path>
</g>
</svg>
</button>
</form>
</div>
</header>
<textarea class="code bg-[#ff620021] flex-1 w-full rounded-[20px] text-[25px] text-black mt-4 p-[15px] transition-all duration-300 !outline-0 !border-0 resize-none"></textarea>
<div class="code mt-4"></div>
</div>
<div class="basis-1/2">
<iframe class="w-full h-full border rounded-[20px] border-1 border-[#FF6100] shadow-[0_0_20px_-10px_#FF6100]"></iframe>
<pre class="error !hidden"></pre>
<pre class="output !hidden"></pre>
</div>
</div>

<script src="https://codemirror.net/codemirror.js"></script>
<script src="assets/salam/script/script.js"></script>
<script type="module" src="assets/js/autoComplete.js"></script>
</body>
</html>
68 changes: 68 additions & 0 deletions salam.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ادیتور زبان فارسی</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
direction: rtl;
}
#editor-container {
width: 100%;
height: 90vh;
border: 1px solid #ccc;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs/loader.min.js"></script>
</head>
<body>
<h2 style="text-align: center;">ادیتور پیشرفته زبان فارسی</h2>
<div id="editor-container"></div>

<script>
// بارگذاری Monaco Editor
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs' } });
require(['vs/editor/editor.main'], function () {
// تعریف زبان فارسی
monaco.languages.register({ id: 'persianLang' });

// تعریف هایلایت سینتکس
monaco.languages.setMonarchTokensProvider('persianLang', {
tokenizer: {
root: [
[/صفحه|جعبه|رنگ|تمام/, "keyword"],
[/«.*?»/, "string"],
[/\d+/, "number"]
]
}
});

// تعریف پیشنهادات اوتوکامپلیت
monaco.languages.registerCompletionItemProvider('persianLang', {
provideCompletionItems: () => {
const suggestions = [
{ label: 'صفحه', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'صفحه:' },
{ label: 'جعبه', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'جعبه:' },
{ label: 'رنگ', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'رنگ=«»', insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet },
{ label: 'تمام', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'تمام' }
];
return { suggestions: suggestions };
}
});

// ساخت ادیتور
monaco.editor.create(document.getElementById('editor-container'), {
value: "صفحه:\n جعبه:\n رنگ=«آبی»\n تمام\nتمام",
language: 'persianLang',
theme: 'vs-dark',
rtl: true,
automaticLayout: true
});
});
</script>
</body>
</html>
19 changes: 0 additions & 19 deletions salam/manifest.json

This file was deleted.

Loading

0 comments on commit 004ed2c

Please sign in to comment.