fix: partial arabic html live previews should render text wihtout meta utf8 tag

Author: abose

src-node/live-preview.js

@@ -116,10 +116,6 @@ function _serveData(getContentAPIToUse, req, res) {
                 ...defaultHeaders,
                 ...customHeaders
             };
-            if(data.textContents && !mergedHeaders['Content-Type'].includes('charset=UTF-8')) {
-                // https://github.com/orgs/phcode-dev/discussions/1676
-                mergedHeaders['Content-Type'] = `${mergedHeaders['Content-Type']};charset=UTF-8`;
-            }
             res.writeHead(200, mergedHeaders);
             if(data.textContents) {
                 res.end(data.textContents);

src/extensions/default/HTMLCodeHints/html-lint.js

@@ -30,6 +30,7 @@ define(function (require, exports, module) {
     const CodeInspection   = brackets.getModule("language/CodeInspection"),
         Strings            = brackets.getModule("strings"),
         EditorManager      = brackets.getModule("editor/EditorManager"),
+        ProjectManager     = brackets.getModule("project/ProjectManager"),
         IndexingWorker     = brackets.getModule("worker/IndexingWorker");
 
     IndexingWorker.loadScriptInWorker(`${module.uri}/../worker/html-worker.js`);
@@ -53,9 +54,10 @@ define(function (require, exports, module) {
                 text,
                 filePath: fullPath
             }).then(lintResult =>{
-                const editor = EditorManager.getActiveEditor();
+                const editor = EditorManager.getCurrentFullEditor();
                 if(!editor || editor.document.file.fullPath !== fullPath) {
-                    reject(new Error("Lint failed as  "+ Phoenix.app.getDisplayLocation(fullPath) + " is not active."));
+                    reject(new Error("Lint failed as  "+ ProjectManager.getProjectRelativeOrDisplayPath(fullPath)
+                        + " is not active."));
                     return;
                 }
                 if (lintResult && lintResult.length) {

src/extensions/default/JSLint/JSHint.js

@@ -164,7 +164,7 @@ define(function (require, exports, module) {
             configFileName = configFileName || CONFIG_FILE_NAME;
             const configFilePath = path.join(dir, configFileName);
             let displayPath = ProjectManager.makeProjectRelativeIfPossible(configFilePath);
-            displayPath = Phoenix.app.getDisplayPath(displayPath);
+            displayPath = ProjectManager.getProjectRelativeOrDisplayPath(displayPath);
             DocumentManager.getDocumentForPath(configFilePath).done(function (configDoc) {
                 if (!ProjectManager.isWithinProject(configFilePath)) {
                     // this is a rare race condition where the user switches project between the get document call.
@@ -198,7 +198,7 @@ define(function (require, exports, module) {
                         resolve(mergedConfig);
                     }).catch(()=>{
                         let extendDisplayPath = ProjectManager.makeProjectRelativeIfPossible(extendFile.fullPath);
-                        extendDisplayPath = Phoenix.app.getDisplayPath(extendDisplayPath);
+                        extendDisplayPath = ProjectManager.getProjectRelativeOrDisplayPath(extendDisplayPath);
                         reject("Error parsing JSHint config file: " + extendDisplayPath);
                     });
                 }

src/extensionsIntegrated/Phoenix-live-preview/BrowserStaticServer.js

@@ -477,7 +477,7 @@ define(function (require, exports, module) {
                     let html = Mustache.render(markdownHTMLTemplate, templateVars);
                     resolve({
                         contents: html,
-                        headers: {'Content-Type': 'text/html; charset=UTF-8'},
+                        headers: {'Content-Type': 'text/html'},
                         path: fullPath
                     });
                 })
@@ -566,9 +566,17 @@ define(function (require, exports, module) {
                 }
             }
 
+            let headers;
+            if(path.endsWith(".htm") || path.endsWith(".html") || path.endsWith(".xhtml") || path.endsWith(".php")) {
+                headers = {
+                    'Content-Type': 'text/html;charset=UTF-8'
+                };
+            }
+
             resolve({
                 path,
-                contents: contents
+                contents: contents,
+                headers
             });
         });
     };
@@ -627,12 +635,6 @@ define(function (require, exports, module) {
                     // headers: {'Content-Type': 'text/html'} // optional headers
                     response.type = 'REQUEST_RESPONSE';
                     response.requestID = requestID;
-                    if(typeof response.contents === "string"){
-                        // https://github.com/orgs/phcode-dev/discussions/1676
-                        response.headers = {
-                            'Content-Type': 'text/html;charset=UTF-8'
-                        };
-                    }
                     messageToLivePreviewTabs(response);
                 })
                 .catch(console.error);

src/extensionsIntegrated/Phoenix-live-preview/NodeStaticServer.js

@@ -408,9 +408,17 @@ define(function (require, exports, module) {
                 }
             }
 
+            let headers;
+            if(path.endsWith(".htm") || path.endsWith(".html") || path.endsWith(".xhtml") || path.endsWith(".php")) {
+                headers = {
+                    'Content-Type': 'text/html;charset=UTF-8'
+                };
+            }
+
             resolve({
                 path,
-                textContents: contents
+                textContents: contents,
+                headers
             });
         });
     };

src/project/ProjectManager.js

@@ -580,6 +580,19 @@ define(function (require, exports, module) {
         return model.makeProjectRelativeIfPossible(absPath);
     }
 
+    /**
+     * Gets a generally displayable path that can be shown to the user in most cases.
+     * Gets the project relative path if possible. If paths is not in project, then if its a platform path(Eg. in tauri)
+     * it will return the full platform path. If not, then it will return a mount relative path for fs access mount
+     * folders opened in the bowser. at last, falling back to vfs path. This should only be used for display purposes
+     * as this path will be changed by phcode depending on the situation in the future.
+     * @param fullPath
+     * @returns {string}
+     */
+    function getProjectRelativeOrDisplayPath(fullPath) {
+        return Phoenix.app.getDisplayPath(makeProjectRelativeIfPossible(fullPath));
+    }
+
     /**
      * Returns the root folder of the currently loaded project, or null if no project is open (during
      * startup, or running outside of app shell).
@@ -2239,6 +2252,7 @@ define(function (require, exports, module) {
     exports.getInitialProjectPath         = getInitialProjectPath;
     exports.getStartupProjectPath         = getStartupProjectPath;
     exports.getProjectRelativePath        = getProjectRelativePath;
+    exports.getProjectRelativeOrDisplayPath = getProjectRelativeOrDisplayPath;
     exports.getWelcomeProjectPath         = getWelcomeProjectPath;
     exports.getPlaceholderProjectPath     = getPlaceholderProjectPath;
     exports.getExploreProjectPath         = getExploreProjectPath;

test/spec/CodeInspection-integ-test.js

@@ -536,7 +536,7 @@ define(function (require, exports, module) {
 
                 expect($("#problems-panel").is(":visible")).toBe(true);
                 let marks = EditorManager.getActiveEditor().getGutterMarker(1, CodeInspection.CODE_INSPECTION_GUTTER);
-                expect(marks.title).toBe('\nSome errors here and there at column: 4');
+                expect(marks.title).toBe('Some errors here and there at column: 4');
                 marks = $(marks);
                 expect(marks.find('span').hasClass(expectedClass)).toBeTrue();
                 return marks;

test/spec/LiveDevelopment-MultiBrowser-test-files/arabicPartial.html

@@ -0,0 +1 @@
+<p id="arabic-text"> 1 يناير 2021 بواسطة </p>

test/spec/LiveDevelopmentMultiBrowser-test.js

@@ -209,7 +209,8 @@ define(function (require, exports, module) {
             liveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
             await awaitsFor(
                 function relatedDocsReceived() {
-                    return (Object.getOwnPropertyNames(liveDoc.getRelated().scripts).length > 0);
+                    return (Object.getOwnPropertyNames(liveDoc.getRelated().scripts).length > 0) &&
+                        liveDoc.isRelated(testFolder + "/import1.css");
                 },
                 "relatedDocuments.done.received",
                 10000
@@ -236,6 +237,28 @@ define(function (require, exports, module) {
             await endPreviewSession();
         }, 30000);
 
+        it("should render partial arabic html with correct utf-8 encoding", async function () {
+            // https://github.com/orgs/phcode-dev/discussions/1676
+            await awaitsForDone(SpecRunnerUtils.openProjectFiles(["arabicPartial.html"]),
+                "SpecRunnerUtils.openProjectFiles arabicPartial.html");
+            await waitsForLiveDevelopmentToOpen();
+
+            let result;
+            await awaitsFor(
+                function isArabicTextProperlyRendered() {
+                    LiveDevProtocol.evaluate(`document.getElementById('arabic-text').textContent`)
+                        .done((response)=>{
+                            result = JSON.parse(response.result||"");
+                        });
+                    return result === " 1 يناير 2021 بواسطة ";
+                },
+                `arabic text to be read correctly`,
+                5000,
+                50
+            );
+            await endPreviewSession();
+        }, 30000);
+
         function _isRelatedStyleSheet(liveDoc, fileName) {
             let relatedSheets = Object.keys(liveDoc.getRelated().stylesheets);
             for(let relatedPath of relatedSheets){
@@ -371,7 +394,7 @@ define(function (require, exports, module) {
                         });
                     return result === verifyText;
                 },
-                "relatedDocuments.done.received",
+                `relatedDocuments.done.received verifying ${verifyID} to have ${verifyText}`,
                 5000,
                 50
             );