JS/HTML troubles in WebGadget / RTF troubles in EditorGadget
Posted: Wed Oct 24, 2007 5:33 pm
I'm trying to make a specialised plain text editor - using RTF to achieve certain display effects. Over the last few weeks I have tried different approaches and have asked specific questions on this forum regarding each approach. At this stage, none of these approaches has worked and to be honest I'm feeling pretty demoralised.
Since this project has gone on long enough, I'm going to describe the whole thing here so that anyone interested knows exactly what I'm after, instead of just one aspect of it. Apologies if this seems overbearing, but I don't want you to get the wrong idea about what I'm trying to do.
This text editor is a plugin for an external program. As such, there could be up to 4 instances of it onscreen at once. (Four copies of the DLL are inside the program's folder and it summons them as and when it needs to.)
So what is specialised about this editor? The host program is used for building libraries of notes. These notes can be "linked" to each other. Initially I had an index file and the links between notes were recorded there, but then I thought it'd be better to allow the user to place the link to another note at the position they wanted it in the text. Since it would be long-winded to update the position of a link in the index file every time it was changed, I abandoned the index and now links are stored inside each note. When the note is loaded, the text editor replaces all links inside it with a clickable hyperlink. Ideally, I want these hyperlinks to be non-editable.
Let's say a note is opened and it has only one link. The link is to a note called "Extra Text". Here's how the text editor should look when it first opens the note:
All the text is editable except for the hyperlink, which I want to be "locked". (And I can’t figure out how to use RTF LockText command!)
If the user clicks on the link to "Extra Text", this is what should happen:
Again, all the text should be editable - both outside and inside the boxes. I have managed this in MS-Word using a table with one row and one column. The table is automatically sized to the width of the page, and it resizes automatically whenever a new line is created (or needed) inside the box.
Then they would click the hyperlink "EXPANDED: EXTRA TEXT" and the box would be collapsed (and the contents saved to the linked note's file).
All this would have to be done with PB code, catching hyperlink clicks inside the gadget.
The two images above are screenshots from MS-Word, where I have constructed exactly the visual effect I'm looking for (I didn't manage the collapsing, but since the text would have to be updated from file every time the user expanded a link, MS-Word code wouldn't be valid anyway). I used the test hyperlink target "www.hotmail.com" just for the sake of it.
Since Word clutters RTF files with unbelievable amounts of bumf, I copied the whole thing in collapsed and expanded states, then pasted it into WordPad and saved it as separate RTFs. This produces much simpler RTF code, which still displays correctly in both WordPad and Word. I then "injected" the RTF code into the EditorGadget. Here's how it shows the collapsed state:
The first problem: the hyperlink is not displaying correctly (alias and URL are consecutive instead of "merged"). I've tried different ways of coding the hyperlink but the EditorGadget always displays it the same way. Does anyone know how to achieve this?
The second problem: the hyperlink is not centered.
Now say the user clicks the hyperlink. We inject the RTF code for the expanded state and it looks like this:
As you can see, more problems:
These five problems are what I need help with.
Do you think these problems could be inherent in the EditorGadget's handling of RTF code?
Here is the RTF code for the collapsed state:
and the expanded state:
And the PB code:
The text editor has additional functions not related to this problem, but which need to be accommodated for by the solution. The first four I have already achieved with two different approaches (the EditorGadget and the ScintillaGadget):
Unless the problems mentioned can be overcome within the EditorGadget, a different tool will be needed. I've been considering my options...
PS. If you’ve read this far, thanks for reading!
Since this project has gone on long enough, I'm going to describe the whole thing here so that anyone interested knows exactly what I'm after, instead of just one aspect of it. Apologies if this seems overbearing, but I don't want you to get the wrong idea about what I'm trying to do.
This text editor is a plugin for an external program. As such, there could be up to 4 instances of it onscreen at once. (Four copies of the DLL are inside the program's folder and it summons them as and when it needs to.)
So what is specialised about this editor? The host program is used for building libraries of notes. These notes can be "linked" to each other. Initially I had an index file and the links between notes were recorded there, but then I thought it'd be better to allow the user to place the link to another note at the position they wanted it in the text. Since it would be long-winded to update the position of a link in the index file every time it was changed, I abandoned the index and now links are stored inside each note. When the note is loaded, the text editor replaces all links inside it with a clickable hyperlink. Ideally, I want these hyperlinks to be non-editable.
Let's say a note is opened and it has only one link. The link is to a note called "Extra Text". Here's how the text editor should look when it first opens the note:
All the text is editable except for the hyperlink, which I want to be "locked". (And I can’t figure out how to use RTF LockText command!)
If the user clicks on the link to "Extra Text", this is what should happen:
Again, all the text should be editable - both outside and inside the boxes. I have managed this in MS-Word using a table with one row and one column. The table is automatically sized to the width of the page, and it resizes automatically whenever a new line is created (or needed) inside the box.
Then they would click the hyperlink "EXPANDED: EXTRA TEXT" and the box would be collapsed (and the contents saved to the linked note's file).
All this would have to be done with PB code, catching hyperlink clicks inside the gadget.
The two images above are screenshots from MS-Word, where I have constructed exactly the visual effect I'm looking for (I didn't manage the collapsing, but since the text would have to be updated from file every time the user expanded a link, MS-Word code wouldn't be valid anyway). I used the test hyperlink target "www.hotmail.com" just for the sake of it.
Since Word clutters RTF files with unbelievable amounts of bumf, I copied the whole thing in collapsed and expanded states, then pasted it into WordPad and saved it as separate RTFs. This produces much simpler RTF code, which still displays correctly in both WordPad and Word. I then "injected" the RTF code into the EditorGadget. Here's how it shows the collapsed state:
The first problem: the hyperlink is not displaying correctly (alias and URL are consecutive instead of "merged"). I've tried different ways of coding the hyperlink but the EditorGadget always displays it the same way. Does anyone know how to achieve this?
The second problem: the hyperlink is not centered.
Now say the user clicks the hyperlink. We inject the RTF code for the expanded state and it looks like this:
As you can see, more problems:
- Internal colour of table is not showing.
- Table is not "wrapped", nor are linebreaks catered to. The table has been created with only one line in height
- If you press RETURN inside the table, a new row is created instead of a new line. (See image below).
These five problems are what I need help with.
Do you think these problems could be inherent in the EditorGadget's handling of RTF code?
Here is the RTF code for the collapsed state:
Code: Select all
{\rtf1\ansi\ansicpg1252\deff0\deflang2057\deflangfe2057{\fonttbl{\f0\fmodern\fprq1\fcharset0 Courier New;}}
{\colortbl ;\red255\green255\blue255;\red0\green0\blue255;\red255\green0\blue255;\red0\green93\blue186;}
\viewkind4\uc1\pard\f0\fs20 First line of normal text.\par
\par
{\field{\*\fldinst{HYPERLINK "http://www.hotmail.com/"}}{\fldrslt{-> \ul HIDDEN: EXTRA TEXT\ulnone <-}}} \par \par
Second line of normal text.
}Code: Select all
{\rtf1\ansi\ansicpg1252\deff0\deflang2057\deflangfe2057{\fonttbl{\f0\fmodern\fprq1\fcharset0 Courier New;}}
{\colortbl ;\red255\green255\blue255;\red0\green0\blue255;\red255\green0\blue255;\red0\green93\blue186;}
\viewkind4\uc1\pard\f0\fs20 First line of normal text.\par
\par
\trowd\trgaph108\trleft-108\trqc\trbrdrl\brdrs\brdrw20\brdrcf3 \trbrdrt\brdrs\brdrw20\brdrcf3 \trbrdrr\brdrs\brdr20\brdrcf3 \trbrdrb\brdrs\brdrw20\brdrcf3 \trpaddl108\trpaddr108\trpaddfl3\trpaddfr3
\clcbpat4\clbrdrl\brdrw20\brdrs\brdrcf3\clbrdrt\brdrw20\brdrs\brdrcf3\clbrdrr\brdrw20\brdrs\brdrcf3\clbrdrb\brdrw20\brdrs\brdrcf3 \cellx8414\pard\intbl\qc\cf1
{\field{\*\fldinst{HYPERLINK "http://www.hotmail.com/"}}{\fldrslt{-> \ul EXPANDED: EXTRA TEXT\ulnone <-}}}
\f0\fs20\par
\pard\intbl\par
First line inside box.\par
Second line inside box.
\cell\row\pard\cf0\par
Second line of normal text.
}Code: Select all
Declare InjectRTF(rtf$)
Global EG.l
window=OpenWindow(#PB_Any,0,0,700,450,"test")
CreateGadgetList(WindowID(window))
EG=EditorGadget(#PB_Any,0,0,700,450)
SetGadgetColor(EG,#PB_Gadget_BackColor,#Black)
SendMessage_(GadgetID(EG), #EM_SETTARGETDEVICE, #Null, 0)
file$="test collapsed.rtf"
;file$="test expanded.rtf"
file=OpenFile(#PB_Any,file$)
If file
While Not Eof(file)
rtf$=rtf$+ReadString(file)+Chr(13)+Chr(10)
Wend
CloseFile(file)
EndIf
InjectRTF(rtf$)
Repeat
Delay(5)
If GetAsyncKeyState_(#VK_ESCAPE) : Break : EndIf
Until WindowEvent()=#PB_Event_CloseWindow
Procedure InjectRTF(rtf$)
SetGadgetText(EG, rtf$)
SetGadgetColor(EG,#PB_Gadget_FrontColor,#White)
EndProcedureThe text editor has additional functions not related to this problem, but which need to be accommodated for by the solution. The first four I have already achieved with two different approaches (the EditorGadget and the ScintillaGadget):
- Automatic colouring of designated "keywords"
- A custom right-click menu
- Custom keyboard shortcuts
- Normal behind-the-scenes editor functions (Get current word, current line etc.)
- Lockable text for the hyperlinks
- Possibly, multiple layers of tables (boxes within boxes within boxes, following the links between notes). However, I'll only attempt this if I can conquer one layer!
- Possibly, graphics
- All text needs to be fed into the editor whenever uses clicks to expand a hyperlink, since the linked notes could be getting updated dynamically.
Unless the problems mentioned can be overcome within the EditorGadget, a different tool will be needed. I've been considering my options...
- Scintilla. I don’t really think this is an option. Whilst it’s very good for source code editing, Scintilla is not optimised for RTF and can’t do tables, graphics or text alignment. I would need to code extensions for each of these, and that’s far beyond my expertise. It would take huge amounts of time and effort to learn and do, and I can't believe there isn't a simpler solution.
- WebGadget. I could do the whole thing in HTML and stream it into the WebGadget. Problem: I don't know how to do editable text in HTML, and everything has to function outwardly like a normal text editor (plus behind-the-scenes functions - ability to get current word, etc.)
- RTF dll. This could be expensive, and if I'm not mistaken, 4 copies of it would be necessary IN ADDITION TO the 4 copies of the PB dll. So it seems pretty clumsy.
PS. If you’ve read this far, thanks for reading!
