Add RTL/bidi language support for Inky

app/export-for-web-template/main.js

@@ -12,7 +12,9 @@
     // We support:
     //  # theme: dark
     //  # author: Your Name
+    //  # direction: rtl
     var globalTags = story.globalTags;
+    var globalTagDirection = null;
     if( globalTags ) {
         for(var i=0; i<story.globalTags.length; i++) {
             var globalTag = story.globalTags[i];
@@ -28,6 +30,11 @@
                 var byline = document.querySelector('.byline');
                 byline.innerHTML = "by "+splitTag.val;
             }
+
+            // direction: rtl
+            else if( splitTag && splitTag.property == "direction" ) {
+                globalTagDirection = splitTag.val.trim().toLowerCase();
+            }
         }
     }
 
@@ -36,6 +43,7 @@
 
     // page features setup
     setupTheme(globalTagTheme);
+    setupDirection(globalTagDirection);
     var hasSave = loadSavePoint();
     setupButtons(hasSave);
 
@@ -387,6 +395,14 @@
             document.body.classList.add("dark");
     }
 
+    // Sets up RTL (Right-to-Left) text direction when specified via global tag
+    function setupDirection(globalTagDirection) {
+        if( globalTagDirection === "rtl" ) {
+            storyContainer.setAttribute("dir", "rtl");
+            document.body.classList.add("rtl");
+        }
+    }
+
     // Used to hook up the functionality for global functionality buttons
     function setupButtons(hasSave) {
 

app/export-for-web-template/style.css

@@ -304,3 +304,32 @@ body.dark {
 .dark #controls {
     background: black;
 }
+
+/*
+  RTL (Right-to-Left) Language Support (Added in Inky 0.16.0)
+    # direction: rtl
+*/
+
+body.rtl #story p {
+    text-align: right;
+}
+
+body.rtl .choice {
+    text-align: center;
+}
+
+body.rtl .end {
+    text-align: center;
+}
+
+body.rtl #controls {
+    right: auto;
+    left: 14px;
+}
+
+@media screen and (max-width: 980px) {
+    body.rtl #controls {
+        left: 0;
+        right: 0;
+    }
+}

app/main-process/aboutWindow.js

@@ -2,7 +2,7 @@ const electron = require('electron');
 const BrowserWindow = electron.BrowserWindow;
 const path = require("path");
 const fs = require("fs");
-const inkjsPackage = require('inkjs/package.json');
+const inkjsPackage = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'inkjs', 'package.json'), 'utf8'));
 const i18n = require('./i18n/i18n.js');
 
 

app/main-process/appmenus.js

@@ -15,6 +15,10 @@ let theme = null;
 let zoom = null;
 let animationEnabled = null;
 let autoCompleteDisabled = null; // default on
+let bidifyEditorEnabled = null;
+let bidifyPlayerEnabled = null;
+let stripBidiOnSave = null;
+let bidifyExportEnabled = null;
 
 
 let callbacks = {
@@ -320,6 +324,35 @@ function refresh() {
                     type: "checkbox",
                     checked: animationEnabled,
                     click: callbacks.toggleAnimation
+                },
+                {
+                    label: i18n._("Bidify (RTL)"),
+                    submenu: [
+                        {
+                            label: i18n._("Bidify in editor"),
+                            type: "checkbox",
+                            checked: !!bidifyEditorEnabled,
+                            click: callbacks.toggleBidifyEditor
+                        },
+                        {
+                            label: i18n._("Bidify in player"),
+                            type: "checkbox",
+                            checked: !!bidifyPlayerEnabled,
+                            click: callbacks.toggleBidifyPlayer
+                        },
+                        {
+                            label: i18n._("Strip bidi on save (Recommended)"),
+                            type: "checkbox",
+                            checked: stripBidiOnSave !== false,
+                            click: callbacks.toggleStripBidiOnSave
+                        },
+                        {
+                            label: i18n._("Bidify exported JSON"),
+                            type: "checkbox",
+                            checked: !!bidifyExportEnabled,
+                            click: callbacks.toggleBidifyExport
+                        }
+                    ]
                 }
 
             ]
@@ -503,6 +536,10 @@ exports.AppMenus = {
     setZoom : (z) => zoom = z,
     setAnimationEnabled : (e) => animationEnabled = e,
     setAutoCompleteDisabled : (e) => autoCompleteDisabled = e,
+    setBidifyEditorEnabled : (e) => bidifyEditorEnabled = e,
+    setBidifyPlayerEnabled : (e) => bidifyPlayerEnabled = e,
+    setStripBidiOnSave : (e) => stripBidiOnSave = e,
+    setBidifyExportEnabled : (e) => bidifyExportEnabled = e,
     setCustomSnippetMenus : (snippets) => {customInkSnippets = snippets},
     refresh : refresh
 }

app/main-process/inklecate.js

@@ -5,6 +5,7 @@ const path = require("path");
 const electron = require('electron');
 const ipc = electron.ipcMain;
 const mkdirp = require('mkdirp');
+const { bidifyJson } = require("../renderer/bidify.js");
 
 // inklecate is packaged outside of the main asar bundle since it's executable
 const inklecateNames = {
@@ -130,6 +131,16 @@ function compile(compileInstruction, requester) {
             sendAnyErrors();
 
             if( code == 0 || code === undefined ) {
+                // Post-process exported JSON to add bidi markers if enabled
+                if (jsonExportPath && compileInstruction.bidifyExportEnabled) {
+                    try {
+                        var json = fs.readFileSync(jsonExportPath, 'utf8');
+                        json = bidifyJson(json);
+                        fs.writeFileSync(jsonExportPath, json);
+                    } catch(e) {
+                        console.error("Failed to bidify exported JSON:", e);
+                    }
+                }
                 requester.send('inklecate-complete', sessionId, jsonExportPath);
             }
             else {

app/main-process/main.js

@@ -229,6 +229,38 @@ app.on('ready', function () {
                 eachWindow.browserWindow.webContents.send("set-autocomplete-disabled", autoCompleteDisabled);
             }
         },
+        toggleBidifyEditor: () => {
+            let enabled = !ProjectWindow.getViewSettings().bidifyEditorEnabled;
+            ProjectWindow.addOrChangeViewSetting('bidifyEditorEnabled', enabled);
+            for(let i=0; i<ProjectWindow.all().length; i++) {
+                let eachWindow = ProjectWindow.all()[i];
+                eachWindow.browserWindow.webContents.send("set-bidify-editor-enabled", enabled);
+            }
+        },
+        toggleBidifyPlayer: () => {
+            let enabled = !ProjectWindow.getViewSettings().bidifyPlayerEnabled;
+            ProjectWindow.addOrChangeViewSetting('bidifyPlayerEnabled', enabled);
+            for(let i=0; i<ProjectWindow.all().length; i++) {
+                let eachWindow = ProjectWindow.all()[i];
+                eachWindow.browserWindow.webContents.send("set-bidify-player-enabled", enabled);
+            }
+        },
+        toggleStripBidiOnSave: () => {
+            let enabled = ProjectWindow.getViewSettings().stripBidiOnSave === false;
+            ProjectWindow.addOrChangeViewSetting('stripBidiOnSave', enabled);
+            for(let i=0; i<ProjectWindow.all().length; i++) {
+                let eachWindow = ProjectWindow.all()[i];
+                eachWindow.browserWindow.webContents.send("set-strip-bidi-on-save", enabled);
+            }
+        },
+        toggleBidifyExport: () => {
+            let enabled = !ProjectWindow.getViewSettings().bidifyExportEnabled;
+            ProjectWindow.addOrChangeViewSetting('bidifyExportEnabled', enabled);
+            for(let i=0; i<ProjectWindow.all().length; i++) {
+                let eachWindow = ProjectWindow.all()[i];
+                eachWindow.browserWindow.webContents.send("set-bidify-export-enabled", enabled);
+            }
+        },
         insertSnippet: (focussedWindow, snippet) => {
             if( focussedWindow )
             focussedWindow.webContents.send('insertSnippet', snippet);
@@ -246,6 +278,10 @@ app.on('ready', function () {
     AppMenus.setZoom(ProjectWindow.getViewSettings().zoom);
     AppMenus.setAnimationEnabled(ProjectWindow.getViewSettings().animationEnabled);
     AppMenus.setAutoCompleteDisabled(ProjectWindow.getViewSettings().autoCompleteDisabled)
+    AppMenus.setBidifyEditorEnabled(ProjectWindow.getViewSettings().bidifyEditorEnabled);
+    AppMenus.setBidifyPlayerEnabled(ProjectWindow.getViewSettings().bidifyPlayerEnabled);
+    AppMenus.setStripBidiOnSave(ProjectWindow.getViewSettings().stripBidiOnSave);
+    AppMenus.setBidifyExportEnabled(ProjectWindow.getViewSettings().bidifyExportEnabled);
 
     AppMenus.refresh();
     ProjectWindow.setEvents({
@@ -263,6 +299,10 @@ app.on('ready', function () {
             AppMenus.setZoom(viewSettings.zoom);
             AppMenus.setAnimationEnabled(viewSettings.animationEnabled);
             AppMenus.setAutoCompleteDisabled(viewSettings.autoCompleteDisabled);
+            AppMenus.setBidifyEditorEnabled(viewSettings.bidifyEditorEnabled);
+            AppMenus.setBidifyPlayerEnabled(viewSettings.bidifyPlayerEnabled);
+            AppMenus.setStripBidiOnSave(viewSettings.stripBidiOnSave);
+            AppMenus.setBidifyExportEnabled(viewSettings.bidifyExportEnabled);
             AppMenus.refresh();
         }
     });

app/main-process/projectWindow.js

@@ -100,6 +100,10 @@ function ProjectWindow(filePath) {
         this.zoom(settings.zoom);
         this.browserWindow.webContents.send('set-animation-enabled', settings.animationEnabled);
         this.browserWindow.webContents.send('set-autocomplete-disabled', !!settings.autoCompleteDisabled);
+        this.browserWindow.webContents.send('set-bidify-editor-enabled', !!settings.bidifyEditorEnabled);
+        this.browserWindow.webContents.send('set-bidify-player-enabled', !!settings.bidifyPlayerEnabled);
+        this.browserWindow.webContents.send('set-strip-bidi-on-save', settings.stripBidiOnSave !== false);
+        this.browserWindow.webContents.send('set-bidify-export-enabled', !!settings.bidifyExportEnabled);
     });
 
     // Project settings may affect menus etc, so we refresh that
@@ -316,7 +320,7 @@ ProjectWindow.open = function(filePath) {
 }
 
 ProjectWindow.getViewSettings = function() {
-    let viewSettingDefaults = { theme:'light', zoom:'100', animationEnabled:true };
+    let viewSettingDefaults = { theme:'light', zoom:'100', animationEnabled:true, bidifyEditorEnabled:false, bidifyPlayerEnabled:false, stripBidiOnSave:true, bidifyExportEnabled:false };
 
     if(!fs.existsSync(viewSettingsPath)) {
         return viewSettingDefaults;