Mercurial

diff .cms/lib/codemirror/demo/bidi.html @ 0:78edf6b517a0 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
24.10
author Coffee CMS <info@coffee-cms.ru>
date Fri, 11 Oct 2024 22:40:23 +0000
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/.cms/lib/codemirror/demo/bidi.html	Fri Oct 11 22:40:23 2024 +0000
@@ -0,0 +1,106 @@
+<!doctype html>
+
+<title>CodeMirror: Bi-directional Text Demo</title>
+<meta charset="utf-8"/>
+<link rel=stylesheet href="../doc/docs.css">
+
+<link rel="stylesheet" href="../lib/codemirror.css">
+<script src="../lib/codemirror.js"></script>
+<script src="../mode/xml/xml.js"></script>
+<style>
+  .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+  fieldset {border: none}
+</style>
+<div id=nav>
+  <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/codemirror/codemirror5">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">Bi-directional Text</a>
+  </ul>
+</div>
+
+<article>
+<h2>Bi-directional Text Demo</h2>
+<form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by Google Translate -->
+<!-- قطعة من دليل CodeMirror، "ترجم" إلى العربية بواسطة جوجل ترجمة -->
+
+<dl>
+  <dt id=option_value><code>value (string or Doc)</code></dt>
+  <dd>قيمة البداية المحرر. يمكن أن تكون سلسلة، أو. كائن مستند.</dd>
+  <dt id=option_mode><code>mode (string or object)</code></dt>
+  <dd>وضع الاستخدام. عندما لا تعطى، وهذا الافتراضي إلى الطريقة الاولى
+  التي تم تحميلها. قد يكون من سلسلة، والتي إما أسماء أو ببساطة هو وضع
+  MIME نوع المرتبطة اسطة. بدلا من ذلك، قد يكون من كائن يحتوي على
+  خيارات التكوين لواسطة، مع <code>name</code> الخاصية التي وضع أسماء
+  (على سبيل المثال <code>{name: "javascript", json: true}</code>).
+  صفحات التجريبي لكل وضع تحتوي على معلومات حول ما معلمات تكوين وضع
+  يدعمها. يمكنك أن تطلب CodeMirror التي تم تعريفها طرق وأنواع MIME
+  الكشف على <code>CodeMirror.modes</code>
+  و <code>CodeMirror.mimeModes</code> الكائنات. وضع خرائط الأسماء
+  الأولى لمنشئات الخاصة بهم، وخرائط لأنواع MIME 2 المواصفات
+  واسطة.</dd>
+  <dt id=option_theme><code>theme (string)</code></dt>
+  <dd>موضوع لنمط المحرر مع. يجب عليك التأكد من الملف CSS تحديد
+  المقابلة <code>.cm-s-[name]</code> يتم تحميل أنماط (انظر
+  <a href="../theme/"><code>theme</code></a> الدليل في التوزيع).
+  الافتراضي هو <code>"default"</code> ، والتي تم تضمينها في
+  الألوان <code>codemirror.css</code>. فمن الممكن استخدام فئات متعددة
+  في تطبيق السمات مرة واحدة على سبيل المثال <code>"foo bar"</code>
+  سيتم تعيين كل من <code>cm-s-foo</code> و <code>cm-s-bar</code>
+  الطبقات إلى المحرر.</dd>
+</dl>
+</textarea>
+  <fieldset>
+    Editor default direction:
+    <input type="radio" id="ltr" name="direction"/><label for="ltr">LTR</label>
+    <input type="radio" id="rtl" name="direction"/><label for="rtl">RTL</label>
+  </fieldset>
+  <fieldset>
+    HTML document direction:
+    <input type="radio" id="htmlltr" name="htmldirection"/><label for="htmlltr">LTR</label>
+    <input type="radio" id="htmlrtl" name="htmldirection"/><label for="htmlrtl">RTL</label>
+  </fieldset>
+  <fieldset>
+    <input type="checkbox" id="rtlMoveVisually"/><label for="rtlMoveVisually">Use visual order for arrow key movement.</label>
+  </fieldset>
+</form>
+
+    <script>
+var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+  mode: "text/html",
+  lineNumbers: true,
+  lineWrapping: true,
+  direction: "rtl"
+});
+
+var dirRadios = {ltr: document.getElementById("ltr"),
+                 rtl: document.getElementById("rtl")};
+dirRadios[editor.getOption("direction")].checked = true;
+dirRadios["rtl"].onchange = dirRadios["ltr"].onchange = function() {
+  editor.setOption("direction", dirRadios["rtl"].checked ? "rtl" : "ltr");
+};
+
+var HtmlDirRadios = {ltr: document.getElementById("htmlltr"),
+                 rtl: document.getElementById("htmlrtl")};
+HtmlDirRadios["ltr"].checked = true;
+HtmlDirRadios["rtl"].onchange = HtmlDirRadios["ltr"].onchange = function() {
+  document.dir = (HtmlDirRadios["rtl"].checked ? "rtl" : "ltr");
+};
+
+var moveCheckbox = document.getElementById("rtlMoveVisually");
+moveCheckbox.checked = editor.getOption("rtlMoveVisually");
+moveCheckbox.onchange = function() {
+  editor.setOption("rtlMoveVisually", moveCheckbox.checked);
+};
+</script>
+
+  <p>Demonstration of bi-directional text support. See
+  the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
+  blog post</a> for more background.</p>
+
+</article>