1

While doing translation for Blender webpages,

(https://docs.blender.org/manual/en/3.5/index.html)

I realised that many times I have to open the web-page to see the overall content and thus reading the text in its context in order to get the accurate translation for such a context.

Because the webpage address is embedded in the documentations, ie. PO files:

(#: ../../manual/editors/nla/tracks.rst:69)

I can view the PO file with vscode and then write a little extension to parse the reading PO text, at the cursor position, and get the correct address line, using regular expression, then compose the root address to open to that webpage accurately.

However, as I selected the text and managed to obtain the selected text within the javascript in the extension, how can I open the page and instruct the page to jump to selected text? Can you help?

This is the portion of the extension code I am using, not very pro as I just started learning to create this today:

const vscode = require('vscode');
const path = require('node:path');
const os = require('node:os');
const dns = require('dns')
const end_path = '.html'


/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
    const hostname = os.hostname()
    const home = process.env.HOME
    const home_dev = path.join(home, 'Dev/tran')
    const docs = path.join(home_dev, 'blender_docs')
    const local_web_root = [
        path.join(docs, 'build/en/html'),
        path.join(docs, 'build/vi/html'),
    ]
    const extern_web_root = [
        path.join('https://docs.blender.org/manual/en/3.5'),
        path.join('https://docs.blender.org/manual/vi/3.5')
    ]

    let disposable = vscode.commands.registerCommand('OpenPage.openWebPage', async function () {

        const editor = vscode.window.activeTextEditor;
        const cursorPosition = editor.selection.active; 

        const selection = editor.selection;
        if (selection && !selection.isEmpty) {
            const selectionRange = new vscode.Range(selection.start.line, selection.start.character, selection.end.line, selection.end.character);
            const highlighted = editor.document.getText(selectionRange);
            
            const fileTextToCursor = editor.document.getText(new vscode.Range(0, 0, cursorPosition.line, cursorPosition.character));

            // const matchurl = /^#.*(:\d+)?/.exec(highlighted);
            // const matchurl = /#[^\/]+\/[^\/]+\/manual\/([^:\.]+)\.rst(:\d+)?/

            // vscode.env.openExternal(url)
            const blocks = fileTextToCursor.split(/[\r\n]{2}/);
            const block_len = blocks.length
            const last_index = Math.max(block_len-1, 0)
            const last_block = blocks[last_index]

            const last_block_list = last_block.split(/[\r\n]/)
            const last_block_length = last_block_list.length
            
            const path_list = [];
            for (let i = 0; i < last_block_length; i++) {
                const text_line = last_block_list[i]
                const matchurl = /#[^\/]+\/[^\/]+\/manual\/([^:\.]+)\.rst(:\d+)?/.exec(text_line)
                if (matchurl != null) {
                    path_list.push(matchurl[1])
                }
            }
            const is_connected = (hostname.indexOf('local') == -1)
            
            console.log('last block:' + last_block)
            console.log('path_list:' + path_list)
            console.log('highlighted: ' + highlighted)  
            console.log('hostname:' + hostname)
            console.log('is_connected', is_connected)

            const address_list = (is_connected ? extern_web_root : local_web_root)
            const url_list = []
            for (let i = 0; i < address_list.length; i++){
                const web_root_path = address_list[i]

                for (let j = 0; j < path_list.length; j++){
                    const page_path = path_list[j]
                    const web_address = web_root_path + '/' + page_path + end_path
                    url_list.push(web_address)
                }
            }

            for (let i = 0; i < url_list.length; i++) {
                const url_address = url_list[i]
                const uri = vscode.Uri.parse(url_address)
                console.log('uri', uri)
                vscode.env.openExternal(uri)    
            }
        }

    context.subscriptions.push(disposable);
}


function deactivate() {}

module.exports = {
    activate,
    deactivate
}
  • loosely related: https://stackoverflow.com/q/75535990/11107541 – starball Jun 08 '23 at 19:44
  • also potentially useful: https://wicg.github.io/scroll-to-text-fragment/ – starball Jun 08 '23 at 19:46
  • I tried the fragment, by add ``` '#' + highlighted ``` to the code and the URI parsing shown fragment text, encoded correctly to the URL, but the page doesn't move to the marked text location. Do you know why? – Hoang Duy Tran Jun 08 '23 at 20:42
  • is the content available at page load or does it added to the DOM dynamically? Did you URL-escape the text before using it in the fragment? – starball Jun 08 '23 at 20:55
  • To my best understanding they are static pages. I can make them locally and they are form in separate directories, one for each language. There are js scripts managing of changing languages I believe. I don't think the are added to the DOM dynamically. – Hoang Duy Tran Jun 08 '23 at 22:09
  • For example: ``` – Hoang Duy Tran Jun 08 '23 at 22:15
  • This line of code has already done that for you [vscode.Uri.parse(url_address)] – Hoang Duy Tran Jun 09 '23 at 07:23

0 Answers0